Stats
.mdFour headline numbers that roll in digit by digit, each with a sparkline that draws itself, fills its area and drops an end dot when scrolled into view.
statsmetricsnumberssparklinekpisocial proof
Installation
$npx shadcn@latest add @geturui/stats-section
Also installs: Odometer Number
Usage
usage.tsx
1import { StatsSection } from "@/components/blocks/stats-section";
2
3export default function Numbers() {
4 return (
5 <StatsSection
6 heading="Growing every week"
7 stats={[
8 { label: "Active teams", value: 3120, trend: [1200, 1600, 2100, 2600, 3120], delta: "+20% MoM" },
9 { label: "Uptime", value: 99.98, suffix: "%", decimals: 2, trend: [99.9, 99.95, 99.97, 99.98] },
10 { label: "Median response", value: 84, suffix: " ms", trend: [140, 120, 96, 84], delta: "-40%" },
11 { label: "Countries", value: 62, trend: [20, 34, 48, 62] },
12 ]}
13 />
14 );
15}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
stats | Stat[] | — | { label, value, prefix?, suffix?, decimals?, description?, trend?, delta?, deltaDirection? }. |
stats[].trend | number[] | — | Sparkline points, oldest first. At least two. |
stats[].deltaDirection | "up" | "down" | "up" | Whether the change is good (volt line, success delta) or bad (danger). |
eyebrow / heading / subheading | string | — | Section copy. |
Accessibility
- Stats are a description list (dl/dt/dd) so each number is paired with its label.
- NumberTicker exposes the final value in aria-label; sparklines are aria-hidden.
- Deltas pair colour with an icon and words, and line drawing becomes a fade under reduced motion.