A stats section is four numbers that claim to be evidence. Whether they are depends entirely on whether the reader can tell what each number counts, and most stats sections are careful about the typography and careless about exactly that.
36 public components on 21st have "stats" in the name. The layouts are a row of tiles; the work is in the numbers.
The shapes
Featured Section Stats by Ruixen UI is the marketing row, and Ruixen Stats by the same author is the asymmetric version where one figure dominates - which is the right instinct, since a row of four equal numbers has no argument in it.
Stats Card by Ravi Katiyar and Stats Card by Kavi Katiyar are the single tiles, Stats Widget by Ravi Katiyar is the financial figure with a change, and Advanced Stats by UI Layouts is the dashboard version with a chart behind the figures.
For the in-product variety - KPI tiles inside a dashboard rather than claims on a landing page - the stats and progress guide has the rules that make a row scannable.
What makes a number evidence
Say what it counts, in the reader's terms. "12,000+" above the word "Users" is not a fact. Twelve thousand what: signups, monthly actives, paying accounts? The difference between those is the whole claim, and the vaguer label is always the weaker number.
Give it a period. "40% faster" is meaningless without "than the previous version" or "than the manual process". A comparison with no baseline is a shape, not a measurement.
Use one that could be checked. A number a reader could plausibly verify - repository stars, published components, customers you can name - carries more than a big round internal figure nobody outside can see.
Round honestly. 12,000 reads as approximate and is fine. 12,431 reads as precise and had better be, because a reader who checks and finds 9,000 has learned something about all your other numbers.
The counter animation
Almost every stats section animates its numbers upward. Three rules keep it from costing more than it adds, and they are the same as in the progress guide.
The final value belongs in the DOM from the start, so it exists for a crawler, an answer engine and anyone who scrolls past quickly. It should not restart every time the section re-enters the viewport. And under prefers-reduced-motion, render the number immediately.
One more that is specific to this section: use tabular figures. A row of animating numbers with proportional digits jitters horizontally as it counts, which is distracting in a way nobody can name.
Where it belongs
The stats row is one of the more moveable blocks. Under the hero it functions as proof before the argument; after the features it functions as evidence for what was just claimed; on an about page it is company context rather than a sales point.
What does not work is a stats row on a page with no other proof. Four numbers with no source, no names and no demo is the pattern the not-generated guide describes: perfect, empty and interchangeable with any competitor's.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | Card and the type scale underneath | No section |
| shadcn/ui Charts | A sparkline behind the figure | Pulls in a charting library |
CSS grid and tabular-nums | The row itself, honestly | You write the counter |
| 21st | Marketing rows, KPI tiles and chart-backed stats | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- What makes a statistic persuasive on a landing page?
- A label in the reader's terms rather than a category word, a period or baseline for any comparison, a figure that could plausibly be checked, and honest rounding. A number a reader checks and finds wrong teaches them something about every other number on the page.
- Should the numbers animate?
- It is fine with three conditions: the final value is in the DOM from the start so it exists for anyone who does not watch, the count does not restart each time the section scrolls into view, and reduced motion renders it immediately. Use tabular figures or the row jitters as it counts.
- Where should a stats row go?
- Under the hero it is proof before the argument; after the features it is evidence for what was just claimed; on an about page it is company context. What does not work is a stats row on a page with no other proof, which reads as interchangeable with any competitor's.
- Should all four numbers be the same size?
- Rarely. A row of four equal figures has no argument in it. Letting one dominate is what turns a decorative row into a claim, which is the same hierarchy argument the bento layout makes.