Stat card
componentA KPI tile: a small label, a big headline value, and an optional period delta (green up / red down).
Install
npx shadcn@latest add @engram/stat-cardRegistry item: /r/stat-card.json — the machine-readable definition agents install from.
Example
K/D
1.84▲ 12%
Win rate
58%▲ 4%
Kills
2,910▼ 130
Efficiency
2.41
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | ReactNode | — | What the number measures (e.g. "K/D", "Win Rate", "Kills"). |
value* | ReactNode | — | The headline value (pre-formatted). |
delta | number | — | Signed change vs the prior period — colored up=ok / down=bad with an arrow. |
deltaSuffix | string | "" | Unit appended to the delta (e.g. "%"). |
icon | ReactNode | — | Small icon/glyph in the corner. |
tone | StatCardTone | "neutral" | Color the headline value. Default neutral. |
Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.