# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/stats75. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Stats](/blocks/stats)
5. /
6. Audience Figures With Sourcing Notes

# Audience Figures With Sourcing Notes[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/stats75`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop        | Type       | Default | Description                                   |
| ----------- | ---------- | ------- | --------------------------------------------- |
| eyebrow     | string     | –       | Badge6 label above the hairline rule          |
| heading     | string     | –       | Section heading under the rule                |
| description | string     | –       | Supporting paragraph                          |
| figures     | Figure\[\] | \[\]    | One column per figure, four across on desktop |
| className   | string     | –       | Extra classes for the outer section           |

tsCopy

```
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.

## More Stats blocks

[View all Stats](/blocks/stats)

[](/block/stats71)

PRO

stats71

### Single Headline Figure

A results section that commits to one enormous light figure, reads it back as a statement under a hairline, qualifies it with three smaller footnotes, and closes on a captioned full-bleed photograph.

[](/block/stats70)

PRO

stats70

### Annual Report Readings

An annual results section pairing an image tile that floats a live breakdown chart with a light interpretation of it, then four hairline readings that each name their own source, closing on a method panel.

[](/block/stats61)

PRO

stats61

### Typographic Stats

Oversized number rows with labels and context, editorial style.

[](/block/stats69)

PRO

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.

[](/block/stats67)

PRO

stats67

### Before And After Pairs

A results section stacking each measure on its own hairline row, moving a muted starting figure to an accented result across an arrow, with a soft closing panel that floats a live comparison card.

[](/block/stats27)

PRO

stats27

### Editorial Numbered Stats

Magazine-style numbered list layout with large sequence numbers, stat values, and a sticky sidebar heading for an editorial feel.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.