shadcn.io is not affiliated with official shadcn/ui
Numbers Narrative About Block for React
A company's story told through four figures: a title stuck at the start while the reader scrolls, and rows that pair each large number with two sentences on how it happened.
Installation
Overview
A numbers narrative for React with Base UI, written for Pennyfold, a fictional bookkeeping app for small shops. Instead of a wall of tiles, four figures are each given a row: a large number, what it counts, and two sentences on how the company got there, the first set in the foreground and the rest muted. On wide screens the title and a short note stay stuck to the top at the start while the rows scroll by at the end, on a solid divider; on a phone the title comes first and the rows follow under a rule. The numbers roll up once when they scroll into view and keep their final width, so the rows never shift; with reduced motion they are simply there. The story is told in relative time ("In Year 1", "In Year 2") so it never goes stale. For about pages, investor updates and any page where the numbers need their story. The figures are example data.
FAQ
How do I change the figures and the stories?
They are the FIGURES list at the top of the file. Each has a value, an optional suffix (a unit or a percent sign, written small after the number), a label saying what it counts, a lead sentence and the rest of the story. Add or remove rows freely; the layout does not depend on the count.
How does the title stay in place?
It is a plain CSS sticky element inside the start column, so there is no scroll script and no observer. It sticks only from lg, where the columns sit side by side; on a phone it is an ordinary header above the rows. If you put a fixed header on your page, raise its offset (lg:top-16).
How is it read by a screen reader?
The figures are one description list. Each row is a term (what it counts), then two descriptions: the number and the story. Reading order matches the visual order of the story, even though the number is drawn above its label.
Related
- Pro
By The Numbers Bento About
NumbersAn asymmetric bento of company figures for an expense tool: a lead cell with the customer count over a twelve-bar trend, and five smaller cells tagged People, Customers or Product, each footnoted with how it was counted.
- Pro
Two Column About
Company storyA freight forwarder's story in two columns on a solid divider: prose at the start, and six figures at the end as a description list with numbers that roll up once on view, one ruled row each.
- Pro
Copyable Fact Sheet About
Press and recognitionA company fact sheet for a patient-records tool: six facts as a two-column description list in ruled rows, beside a boilerplate paragraph written from the same facts and a Copy button that puts it on the clipboard.
- Pro
Stacked Total Impact About
NumbersA total built from its parts for a scheduling tool: a framed lead with the hours returned over a stacked bar and a legend whose numbers add up to it, and a band of three smaller impact cells.
- Pro
An asymmetric bento for a subscription-analytics tool: a hero cell with the customer count over a ladder of milestones (1,000, 5,000 and 10,000 reached, with the month, and 25,000 next), and three smaller cells that say why each metric matters.
- Pro
Rounds Funding Timeline About
TimelinesA funding history as three round cells, each with the amount, the lead investor, an undisclosed valuation and a segmented bar of where the money went whose four parts add to 100 percent.