Stat Band

beta

A row of two to four big figures, each with a short label and an optional note, for an About page or a landing page.

Built from Rolling Number, Motion Timing, and Glide Highlight.

Preview

The company in numbers.

40
People
Across 12 countries
6
Offices
In four time zones
2016
Year founded
1,800
Releases
Since the first version

two figures side by side

12
Countries
Where the team works
3
Products
On one account

three figures in a row, stacked when narrow

40
People
6
Offices
2016
Year founded

long figures, stacked until there is room

1,250,000
Rows imported
In the last year
$4,200,000
Yearly budget
9–5
Office hours
Monday to Friday

narrow container

40
People
Across 12 countries
6
Offices
In four time zones
2016
Year founded
1,800
Releases
Since the first version

Install

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```
3. Add the website component. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.
```
npx shadcn@latest add @txbrendan/stat-band
```

Use it for

Facts about a company or product on a marketing page, like people, offices, and the year it started. Put a Headline above it.
Write each `value` as it should read, like "40", "1,800", "$4.2M", or "24/7". Its digits roll in once, when the band scrolls into view. Text with no digits just shows.
Keep each `label` to a few words, and the `note` to one short line.
Two figures sit side by side at any width. Three stack until there is room for a row. Four go two by two, then four in a row from 40rem of the band's width.
Keep figures short, like "1,800" or "12k". One wider than that, like "$4.2M" or "1,250,000", makes the whole band stack on phones and wait for more room before it goes to a row.

Avoid it for

Numbers in an app's dashboard, with a change, a loading state, or an empty state. Use Stats Cards, which shows each one in a card.
Figures you cannot back up, like an uptime or a customer count. Say only what is true.
More than four figures. Pick the four that matter most.
Long words as a value. A value is a figure. Put the words in the label.

Props

items
The figures, in order. value is the figure as it reads, label says what it counts, and note is one short line under it. With none, nothing renders.
{ value: string; label: ReactNode; note?: ReactNode }[] · default []
className
Extra classes on the root, which holds the container query.
string
StatBandItem
Type. One figure.
{ value: string; label: ReactNode; note?: ReactNode }

Prop	Type	Default	What it does
items	{ value: string; label: ReactNode; note?: ReactNode }[]	[]	The figures, in order. value is the figure as it reads, label says what it counts, and note is one short line under it. With none, nothing renders.
className	string	-	Extra classes on the root, which holds the container query.
StatBandItem	{ value: string; label: ReactNode; note?: ReactNode }	-	Type. One figure.

The figures are a list. Screen readers hear each value, then its label and note, like "40, People, Across 12 countries".
Screen readers hear the real value even before the digits roll. The rolling digits are hidden from them.
The server sends the real values, so the page reads right with no script, and before it loads.
The roll plays only for a band that starts below the screen. Reduced motion, or motion off, shows the values with no roll, and so does a band already in view.
Nothing in it takes focus. The hover fill is for the pointer only.

Examples

Four figures about a company, under a Headline

<Headline title="The company" muted="in numbers." />
<StatBand
  items={[
    { value: "40", label: "People", note: "Across 12 countries" },
    { value: "6", label: "Offices", note: "In four time zones" },
    { value: "2016", label: "Year founded" },
    { value: "1,800", label: "Releases", note: "Since the first version" },
  ]}
/>

Two figures side by side

<StatBand
  items={[
    { value: "12", label: "Countries" },
    { value: "3", label: "Products" },
  ]}
/>