A row of headline numbers, each with its trend line and change, that roll to new values when the range changes.
Revenue
$36,250+29%over 30 days
New customers
163+35.8%over 30 days
Churn
2.3%-25.8%over 30 days
Median response
231 ms+16.7%over 30 days
pnpm dlx shadcn@latest add @latheui/stat-tilesPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Stat Tiles is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native section attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Overview" | Heading and accessible name of the block. |
| tiles | StatTile[] | sample tiles | Tiles to show, in order. |
| ranges | { value: string; label: string }[] | 7, 30 and 90 days | Ranges offered by the switch, matching the keys of each tile's series. One range hides the switch. |
| defaultRange | string | the second range | Range selected first. |
| onRangeChange | (range: string) => void | — | Called when the range changes. |
| Prop | Type | Default | Description |
|---|---|---|---|
| id* (required) | string | — | Unique id. |
| label* (required) | string | — | Name of the number. |
| series* (required) | Record<string, number[]> | — | One series per range, oldest first. The last point is the value shown, and the change is measured from the first. |
| format | Intl.NumberFormatOptions | — | Formatting of the value, such as a currency or a percent. |
| lowerIsBetter | boolean | — | Set when a fall is the good direction, such as response time. |
Fetch one series per range and let the block work out the value and the change.
<StatTiles
title="This quarter"
ranges={[{ value: "q", label: "Quarter" }]}
tiles={[
{ id: "mrr", label: "MRR", format: { style: "currency", currency: "EUR" }, series: { q: mrrByWeek } },
{ id: "latency", label: "p95 latency", lowerIsBetter: true, series: { q: latencyByWeek } },
]}
/>