MetricCard
Markdown for agentsKPI tile: label, value, directional delta (arrow + color) and a supporting hint.
npx slipstream-ui@latest add metric-cardKPI row
Revenue
$12,480
+12.4%vs last month
Active students
318
+6this week
Churn
2.1%
-0.4vs last month
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Metric name. |
| value | string | number | required | Primary value, rendered tabular. |
| delta | string | — | Signed change, e.g. +12.4%. |
| trend | 'up' | 'down' | 'flat' | 'flat' | Delta direction color + arrow glyph. |
| hint | string | — | Comparison context (vs last month). |
| icon | ReactNode | — | Decorative icon. |
Accessibility
- Deltas always render ↑/↓/→ glyphs, so direction is never color-only.
- Values use tabular-nums so columns align.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.