components / stat-tile
stat-tile.
big-number kpi tile — mono uppercase label, one headline figure with an optional unit, a delta chip that turns red only when the change is the bad one, plus footnote, icon and a slot for an inline sparkline. server-renderable; opts into count-up when animated.
machine learning
0.0h
up 38.0vs last quarter
logged across 148 sessions since jan
cybersecurity
0h
down 12vs last quarter
ctf weekends only, so it moves in steps
working out
0h
up 6vs last quarter
lifting and running, warmups included
installation
bunx @justin06lee/chrome@latest add stat-tileprops
| name | type | default | description |
|---|---|---|---|
| label * | ReactNode | - | mono uppercase kicker above the number. |
| value * | number | string | - | headline figure; strings render as-is (already formatted, "—", etc.). |
| unit | string | - | small trailing qualifier next to the number, e.g. "h". |
| format | (n: number) => string | - | formatter for numeric value and delta; overrides decimals. pairing it with animate requires the tile to render inside a client component (functions can't cross the server boundary). |
| decimals | number | 0 | fixed decimal places for numeric value/delta. |
| animate | boolean | false | tween the number up from 0 when it scrolls into view, via count-up. |
| duration | number | 1 | tween length in seconds when animate is set. |
| delta | number | - | signed change since the comparison period; the sign picks the direction icon. |
| deltaLabel | ReactNode | - | trailing context for the delta chip, e.g. "vs last month". |
| invertDelta | boolean | false | flip which sign is bad, for figures where less is better. |
| footnote | ReactNode | - | muted line under the tile — provenance, caveats, sample size. |
| icon | ReactNode | - | decorative slot pinned to the top-right, typically a 14px lucide icon. |
| children | ReactNode | - | rendered between the number and the footnote — a sparkline fits here. |
| className | string | - |