StatTile
One number that answers a question at a glance.
import { StatTile } from "@flinbu/seed";Three tiles
Components using tokens
94%
+3% vs last month, better
Open contrast issues
3
−5 vs last week, better
Credits left
1,820
−12% vs last month, worse
import { StatTile } from "@flinbu/seed";
import { Boxes, CircleAlert, Coins } from "lucide-react";
<div className="grid w-full grid-cols-1 gap-sm sm:grid-cols-3">
<StatTile icon={<Boxes />} label="Components using tokens" value={94} format={(v) => `${v}%`} delta={{ value: 3, period: "last month" }} trend={[78, 82, 85, 88, 90, 94]} />
<StatTile icon={<CircleAlert />} label="Open contrast issues" value={3} delta={{ value: -5, unit: "", goodWhen: "down", period: "last week" }} />
<StatTile icon={<Coins />} label="Credits left" value={1820} delta={{ value: -12, period: "last month" }} />
</div>Use it for
- Dashboards and overviews.
Use something else for
- Shapes over time: use Chart.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | – | Sentence case. |
value | ReactNode | – | Numbers get separators. |
delta | number{ value, unit?, display?, period?, goodWhen? } | – | Change. |
trend | number[] | – | Sparkline. |
icon / size / format | … | – | More. |
Accessibility
- The delta says 'better' or 'worse' for screen readers; color follows good or bad, not up or down.