display contract
KPI
Stat + sparkline + period selector. Card-sized; for the top of dashboards.
Variants
- default
- Stat + sparkline
- compact
- Stat + tiny inline trend, no sparkline
Sizes
- md
- 240×100pt
- lg
- 320×140pt
Slots
- stat
- sparkline
- Recharts area
- period
- Tabs / dropdown to switch range
Example
<KPI title="Active users" value={users} period="7d" sparkline={data} />Usage rule
Sparkline shows the same period as the stat — never mismatch.
The full KPI contract has 2 more rules, plus the do-not patterns. Get the full recipe.