Stat cards

4 variantsNew

Four metric cards — headline KPI, scrubbable sparkline, goal ring and two-period comparison — with count-ups, redrawn lines, springing arcs and bars.

statskpimetricdashboardsparklineprogressgoalcomparisonanalytics

KPI

kpi.tsx

Headline figure that counts up with its delta, and a breakdown that springs open into a stacked bar.

$npx shadcn@latest add @geturui/stat-cards-kpi

Prop	Type	Default	Description
`label / period`	`string`	—	Metric name and period caption.
`value / previous`	`number`	`84250 / 74960`	Current and previous values.
`previousLabel`	`string`	`"Sep"`	Name of the previous period.
`format`	`"currency" \| "number"`	`"currency"`	Number formatting.
`segments`	`{ label: string; value: number }[]`	—	Breakdown parts.
`invert`	`boolean`	`false`	Treat a drop as good.
`className`	`string`	—	Extra classes on the card.

sparkline.tsx

Period tabs redraw the line; pointer or arrow keys scrub to any point and the figure crossfades.

$npx shadcn@latest add @geturui/stat-cards-sparkline

Prop	Type	Default	Description
`label`	`string`	`"Active users"`	Metric name.
`unit`	`string`	`""`	Suffix after the number.
`series`	`SparkSeries[]`	—	{ key, caption, points, labels } per tab.
`defaultKey`	`string`	—	Initially selected tab.
`className`	`string`	—	Extra classes on the card.

goal.tsx

Progress ring and percentage spring to each logged step; milestones tick and the goal swaps to a done state.

$npx shadcn@latest add @geturui/stat-cards-goal

Prop	Type	Default	Description
`label / unit / deadline`	`string`	—	Captions.
`defaultValue / goal`	`number`	`34 / 48`	Starting progress and target.
`milestones`	`number[]`	`[0.25, 0.5, 0.75, 1]`	Checkpoints as fractions of the goal.
`onChange`	`(value: number) => void`	—	Called after each step.
`className`	`string`	—	Extra classes on the card.

comparison.tsx

Metric tabs swap two period bars that spring to new lengths while the delta crossfades.

$npx shadcn@latest add @geturui/stat-cards-comparison

Prop	Type	Default	Description
`title / currentLabel / previousLabel`	`string`	—	Captions.
`metrics`	`ComparisonMetric[]`	—	{ key, label, current, previous, prefix?, suffix?, invert? }.
`defaultKey`	`string`	—	Initially selected metric.
`className`	`string`	—	Extra classes on the card.

Installs every stat cards variant at once. Each section above has its own command for a single variant.

$npx shadcn@latest add @geturui/stat-cards

Animated numbers render a static value for screen readers; deltas state Up or Down in words alongside the colour.
The sparkline is a slider: arrow keys move through points and the value text is announced.
Progress uses role=progressbar with value text, and reduced motion jumps straight to final values.