Inverted Live Counters

Stats74: Inverted Live Counters

A live platform panel on one dark surface, with four light figures on a hairline rule and a floating trend card reading the month week by week.

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/stats74?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/stats74.tsx, the stats16 trend piece it floats on the panel (installed to components/beste/piece/stats16.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Stats74, stats74Demo } from "@/components/beste/block/stats74";

export default function LivePage() {
  return <Stats74 {...stats74Demo} />;
}

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

import { Stats16 } from "@/components/beste/piece/stats16";
import { Stats74 } from "@/components/beste/block/stats74";

export default function LivePage() {
  return (
    <Stats74
      badge={{ label: "Right now" }}
      heading="The platform, as it stands this morning"
      description="Read from the live database rather than typed into a slide once a quarter."
      updatedLabel="Updated every hour, last at 09:15 UK"
      counters={[
        {
          value: "118",
          label: "practices live",
          detail: "Running real clinics today, not counting trials.",
        },
        {
          value: "99.97%",
          label: "availability this quarter",
          detail: "Against a 99.95% commitment, credited automatically when missed.",
        },
      ]}
      media={
        <Stats16
          label="Appointments this month"
          value="18,412"
          delta="9.1%"
          direction="up"
          caption="against the same point last month"
          bars={[42, 51, 47, 63, 58, 71, 76, 88]}
        />
      }
      mediaCaption="One bar per week. The dip in week three was half term."
      button={{ label: "See the status page", href: "/status" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Counter = {
  value: string;
  label: string;
  detail: string;
};

Behavior notes

• Nothing here updates on its own. Every figure is a string passed in, which keeps the block safe to server-render and cache. updatedLabel is how you tell the reader when the numbers were actually read, and it needs to come from your own data.
• The whole panel is bg-foreground, so every text token inside is a fixed background value and hairlines use border-background/20 rather than border-border.
• The trend card sits directly on the dark panel with no tile or backdrop, which is why it keeps its own surface.
• The action carries an inline border-background/30 text-background hover:bg-background/10 override on top of tone="outline", since the standard outline is invisible on an inverted surface.
• detail is required on every counter, so a live number is never published without a sentence saying exactly what it counts. The demo's first counter uses it to exclude trials, which is the kind of qualifier these panels usually omit.
• Counters use tabular-nums, so a row mixing "118" and "18,412" still aligns.
• The counters grid reflows one, two, then four across, so a four-item row never leaves an orphan at tablet width.