Dashboard blocks
StatCard
Headline metric in a card. Supports delta comparisons with direction and color.
Single
Active tasks
42
Across 6 projects
+12%vs last week
<StatCard
id='active'
label='Active tasks'
value={42}
icon={ListTodo}
tone='primary'
delta={{ value: 12, direction: 'up' }}
hint='Across 6 projects'
/>Grid
Active tasks
42
Across 6 projects
+12%vs last week
Completed
128
Last 30 days
+8%vs last week
Overdue
5
Needs attention
-3%vs last week
Hours tracked
164h
This week
+2%vs last week
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Small uppercase label above the value. |
| value | string | number | — | The primary metric. |
| icon | LucideIcon | — | Icon rendered in a colored tile on the right. |
| tone | 'primary' | 'accent' | 'success' | 'warning' | 'info' | 'neutral' | 'primary' | Tile color. |
| delta | { value: number; direction: "up" | "down" | "flat" } | — | Optional comparison to previous period. |
| hint | string | — | Small text under the value. |