Tones
5 background tones
Sizes
sm · md (default) · lg
Dashboard composition
Typical 4-up KPI row
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | number | — | The hero metric — rendered large in Display weight 900. |
| label | string | null | Mono uppercase descriptor below the value. |
| trend | "up" | "down" | null | null | Direction arrow. up = neon green, down = coral. |
| trendValue | string | null | Text beside the trend arrow, e.g. "12.4%". |
| tone | "white"|"paper"|"lime"|"violet"|"dark" | "white" | Card background color. |
| size | "sm"|"md"|"lg" | "md" | Value font size: sm=28px, md=40px, lg=56px. |
| bordered | boolean | true | Wrap in ink-bordered card. Set false for inline use. |
Usage
import { Stat } from "components/ui/Stat";
// Basic
<Stat value="$28.9k" label="Revenue" />
// With trend
<Stat
value="$28.9k"
label="MRR"
trend="up"
trendValue="12.4%"
tone="lime"
/>
// Dark + large
<Stat value="94%" label="Uptime" tone="dark" size="lg" />