Component · Content · 25
Stats Card
Stats Card = one number, one label, and one delta; naming all three is what makes the prompt work.
Prompts copied · 30 days12,480▲ 8.4%
Failed exports · 30 days37▼ 2.1%
Active workspaces1,204
What is a Stats Card?
A stats card reports one number. Name the number, the comparison it implies, and how the delta is colored.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- The text that names a field; keep it short and place it above the input.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- Shows progress and blocks re-click while an action runs. Disable the control and swap in a spinner.
Anatomy
These are the parts to name in your prompt.
- 01 Label
- 02 Value
- 03 Delta chip
- 04 Sparkline
- 05 Period
When to use
- Dashboard rows of four to six key numbers
- Weekly or monthly reporting summaries
- Any metric where the change matters more than the value
Avoid when
- The number has no comparison period
- It is the only content on the page — show a chart
- More than six cards compete for attention
State the period in the label — “Revenue” alone is a number, “Revenue · last 30 days” is a metric.
See also
Create a stats card component.
STYLE
- 12px radius card, 16px padding, #FFFFFF on #F5F5F7 page
- label 12px #6E6E73, value 28px 600 #1D1D1F, 4px apart
- delta chip 11px: #248A3D for up, #FF3B30 for down, with an arrow
- an optional 40px sparkline sits under the value
STATES
- default, positive, negative, loading with a 28px skeleton bar
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui