Audience Figures With Sourcing NotesPRO

Stats75: Audience Figures With Sourcing Notes

Four publication figures on hairlines, each carrying a label and a short note on how that number was measured rather than leaving the reader to trust it.

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

Base UI flavor

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

This installs the block to components/beste/block/stats75.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

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

import { Stats75, stats75Demo } from "@/components/beste/block/stats75";

export default function AudiencePage() {
  return <Stats75 {...stats75Demo} />;
}

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

import { Stats75 } from "@/components/beste/block/stats75";

export default function AudiencePage() {
  return (
    <Stats75
      eyebrow="The readership"
      heading="Who reads this, and how closely"
      description="We publish these because we ask other people for theirs."
      figures={[
        {
          value: "31,904",
          label: "Readers on the list",
          note: "Grown entirely from the writing, never from a bought list.",
        },
        {
          value: "62%",
          label: "Open the first email",
          note: "Measured on the last twelve issues, bots excluded.",
        },
      ]}
    />
  );
}

Props

type Figure = {
  value: string;
  label: string;
  note?: string;
};

Behavior notes

• value is a string, so a figure can read "31,904", "62%" or "1 in 9" without the block formatting anything. That also keeps thousands separators out of a client render, where locale formatting can differ between server and browser.
• note is where the block earns the number: it is the sourcing line, and a figure without one still renders.
• Figures are tabular-nums so the columns line up, and they sit on hairlines rather than in cards.
• The grid is two across at sm and four at lg, on a bg-muted/40 band.