KPI
GraphKpi
One large number with a sparkline under it.
Good when one number is the headline and the rest is context. Several numbers with no trend is Stat.
Command
pnpm dlx shadcn@latest add <origin>/r/graph-kpi.jsonReads
The number is the headline. The spark is the last twelve points.
12,400
this week
+18%
Latency
A latency number with a falling series.
142ms
read
−18ms
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge of the frame. |
| value | string | — | The large number, already formatted. |
| label | string | — | Line under the number. |
| hint | string | — | Optional extra next to the label, like a delta. |
| data | number[] | — | Sparkline values. Scaled to the highest point. |
| glyphs | "shade" | "ascii" | "hash" | "bar" | string[] | — | Sparkline characters. Defaults to ▁▂▃▄▅▆▇█. |
| palette | "mono" | "duo" | "multi" | "mono" | mono is one accent plus muted. duo paints the second series with --graph-accent-2. multi cycles three accents. |
| corner | string | "+" | Character at each corner of the frame. |
| className | string | — | Passed to the outer frame. |