shadcn.io is not affiliated with official shadcn/ui
Minimal Hero Metric Stats Block for Ark UI
One number and nothing else for a food-bank tool: the week's meals served in display type under the page's top rule, one hairline and one sentence that compares it with last week and last year.
Installation
Overview
A minimal hero metric for React with Ark UI. One number in display type ("14,820", up to 96 pixels tall) rolls up once the block scrolls into view, then a single hairline and one sentence under it: "meals served this week across 41 partner pantries, 340 more than last week and 1,120 more than the same week last year". There is no card, no control and no chart, only the page's top rule and that hairline, so it is the lightest block in the stats family and sits well between two heavier sections. The number and the sentence are one h2, so the heading reads as a whole sentence. The comparisons are computed from three typed weekly counts. The rolling digits start as zeros of the finished number's width, so nothing moves. It's built from SlidingNumber and Guides.
FAQ
How do I change the number?
Edit MEALS (this week, last week and the same week a year ago) and PANTRIES at the top of the file. The sentence is computed: it says "more" or "fewer" from the sign of each difference and writes the amounts with thousands separators. Change the words around the number ("meals served this week") for your own metric.
Why is the number part of the heading?
So the heading says the whole thing. A screen reader landing on it by heading hears "14,820 meals served this week across 41 partner pantries, 340 more than last week and ...", instead of a bare number in one place and a loose sentence in another. The rolling digits are hidden from assistive technology; it reads the final value, never the digits in between.
How does the roll-up behave, and is it motion safe?
It starts the first time the number is at least a quarter in view: each digit rolls from zero to its place with a short CSS transition. The digits start as zeros of the finished number's width (14,820 starts as 00,000), so the centred number never shifts while it rolls. With reduced motion the digits change in place with no roll. Swap in the catalog's CountingNumber for a ticker that races through every value instead.