shadcn.io is not affiliated with official shadcn/ui
Milestone Ladder Metrics About Block for Svelte
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 Svelte with Ark 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.