shadcn.io is not affiliated with official shadcn/ui
Milestone Ladder Metrics About Block for React
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.
Installation
Overview
A milestone numbers section for React with Base UI, written for Summitly, a fictional subscription-analytics tool. The hero cell, two columns wide and two rows tall from lg, shows the customer count as a large figure that rolls up once on view, over a ladder of milestones: 1,000, 5,000 and 10,000 customers each with a tick and "Reached in month 3, 9 and 14", and the next rung, 25,000, with an open circle, a Next badge and how far along it is. Three smaller cells each give a metric and a "Why it matters" sentence. The cells share hairlines from rail to rail and the band ends the block. On a phone the hero comes first and the cells follow in one column. It's built from Guides, Badge and Sliding Number, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages and investor updates that want a story of growth, not just a total. The figures are example data.
FAQ
How do I change the milestones?
CUSTOMERS is today's count, REACHED lists the milestones passed (a goal and the month it fell in) and NEXT_GOAL is the next rung; the progress line ("45% of the way") and the headline are computed from them. The three side cells are METRICS. All the figures are example data: replace the arrays at the top of the file with your own.
How is the ladder read?
It is an ordered list in climbing order, 1,000 first, drawn with the highest rung on top. Each reached rung says "Reached in month 14" in text, and the tick is decoration; the next rung says how far along it is.
Does the figure count up?
Each figure is a SlidingNumber with trigger="view": it holds its final width in zeros until the block scrolls into view, then rolls up once. With reduced motion the digits still arrive at their final values, without the roll, and the screen-reader text is always the final number.
Why does each small cell say why it matters?
A figure alone doesn't say why anyone should care. Each cell pairs one metric with one sentence of reasoning in the "bold lead, muted continuation" style, so the cell reads as a claim and its support.
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
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
Since Day One Figures About
NumbersSix figures for a plant-care app that each set the Year 1 value, struck through, beside today's with an arrow, and write the change as a sign and a percent, all in foreground weights with no colour.
- Pro
Vertical Steps Journey
Principles and processA customer journey section for a CRM: the first 90 days as a vertical stepper with the catalog Steps, each stage with its timing, its hands-on time and its key action, and a line that says which stage you are in.
- Pro
Gantt Roadmap About
TimelinesA Now, Next and Later roadmap for planning software: three horizon columns, three lanes, and initiatives as bars that span the columns they cover, each with a progress fill.
- Pro
Hero Metric Card Stats
Hero metricOne headline figure for a treasury tool, cash on hand in a big number inside a card in a card, with a change pill, a comparison and a two-line footnote that says when it was read and from where.