Components
Insight card
A number, its movement, and how far through something it is.
Total spend
$122,000+12.4%
Avg approval time
1.8 days-0.4d
Budget usedQ2 envelope
64%
64 of 100
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/insight-card.jsonThe sparkline has no labels
That is deliberate. It carries shape — rising, falling, volatile — and nothing more. If a reader needs to know the values, this is the wrong component and the screen wants a chart.
The line takes its colour from the direction of travel between the first and last point, which is the only thing colour is allowed to mean here.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | What the number is. |
| value | string | — | Already formatted — the card does not do currency. |
| delta | { value, direction, sentiment } | — | Passed straight to Delta. |
| series | number[] | — | Normalised internally, so raw figures are fine. |
| progress | { value, total } | — | Renders a track and an 'n of m' caption. |