Quarterly Metric Matrix

Stats69: Quarterly Metric Matrix

A quarterly results matrix of hairline cells, each pairing a light figure with a signed change tinted by whether the movement is good or bad rather than by its direction, over a line of context.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/stats69?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/stats69?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/stats69.tsx plus the badge23 component it uses for the eyebrow.

Quick start

The installed file exports stats69Demo alongside the block: the exact props behind the preview above. Spread it to get a working matrix in one line.

import { Stats69, stats69Demo } from "@/components/beste/block/stats69";

export default function QuarterPage() {
  return <Stats69 {...stats69Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Stats69 } from "@/components/beste/block/stats69";

export default function QuarterPage() {
  return (
    <Stats69
      badge={{ label: "This quarter" }}
      heading="The board pack, without the board pack"
      description="Six numbers a practice lead is asked about every quarter."
      periodLabel="Compared with the previous quarter"
      metrics={[
        {
          label: "Appointments booked",
          value: "3,841",
          delta: "+12.4%",
          direction: "up",
          better: true,
          context: "Across four sites, including the two that opened in February.",
        },
        {
          label: "Invoices outstanding past 30 days",
          value: "£4,180",
          delta: "+£620",
          direction: "up",
          better: false,
          context: "Up, and almost entirely one insurer we are still chasing.",
        },
        {
          label: "Support conversations",
          value: "94",
          delta: "0",
          direction: "flat",
          better: true,
          context: "Flat while appointment volume grew.",
        },
      ]}
      footnote="Every figure links back to the records behind it."
    />
  );
}

Props

type Metric = {
  label: string;
  value: string;
  delta: string;
  direction: "up" | "down" | "flat";
  better: boolean;
  context: string;
};

Behavior notes

• direction and better are separate fields on purpose. The arrow follows the direction of movement, the colour follows whether that movement is good. A falling no-show rate points down and is green; a rising overdue balance points up and is red.
• Conflating the two is the mistake this block is built to avoid, so both fields are required on every metric.
• direction: "flat" overrides better entirely and renders muted, since a flat number is neither.
• periodLabel sits in the header rather than on each cell, so the comparison basis is stated once for the whole matrix.
• context is required and carries its own border-t inside each cell, so no figure is published without a sentence explaining it.
• Cells are flex flex-col with the context marked flex-1, so all cells in a row end level.
• The matrix lines are the gap, not borders: gap-px over a bg-border container with bg-card cells, clipped by the container's overflow-hidden.
• Values and deltas both use tabular-nums, so a currency figure and a percentage still align down the grid.