Metric card
A compact summary for a number that needs context.
pnpm dlx shadcn@latest add @uiarc/metric-cardLive · keyboard ready
- A single plain number with odometer style rolling digits, such as uptime or orders.
- Numbers that update live and should roll in the direction they moved.
- Use stat-card for preformatted strings, trend arrows, tones, and icons.
- Use sparkline when the trend over time matters more than the latest value.
- Use animated-counter for a number without a card around it.
Installation
Add Metric card with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/metric-cardAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { MetricCard } from "@/registry/components/metric-card/metric-card"; export function Uptime() { return <MetricCard label="Uptime" value={99.9} suffix="%" context="Last 30 days" change="+0.2%" />;}MetricCard
A compact card with a label, an odometer style number, context line, and optional change chip.
PropTypeDefaultDescription
labelRequiredstring–What is measured.valueRequirednumber–The number. Rolls up from zero on first view, then between values.suffixstring–Text after the number, such as "%" or " ms".contextRequiredstring–Line under the number, such as "vs last week".changestring–Chip in the top corner, such as "+12%". Omit to hide it.- Renders an article; the number is read as plain text through a visually hidden copy.
- The change chip is plain text, so write the direction into it (+ or -) rather than relying on color.
- It does not announce updates; wrap it in a live region if values change while people watch.
- The value uses animated-counter: digits roll on view and turn the way the number moved.
- Label, context, and change copy roll in from the direction the number moved, and the chip width springs.
- Reduced motion jumps the digits and swaps copy with a quick fade.
- Below 380px the padding tightens and the change chip wraps under the label instead of crowding it.
- Copy lines stay on one line and clip, so keep label and context short.
- Digits roll with animated-counter and a ResizeObserver drives the chip width spring; a dashboard row of cards is fine.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use when the value is a plain number and you want the rolling digits. Use stat-card for preformatted strings, trend arrows, tones, and icons.
- value must be a number; put units in suffix and formatting-free context in context.
The full library index for assistants is at /llms.txt.