Sparkline
In the appThe trend line inside a KPI card: 62 by 26, one stroke, a soft fill fading to nothing, and an end dot. No axes. It shows direction, not values.
@varick/ui/components/sparklineAdded 2 Sept 2026
Usage
import { Sparkline } from "@varick/ui/components/sparkline";
export function Example() {
return <Sparkline data={series} tone="success" label="Time saved, rising" />;
}API reference
Every component also accepts className and the native props of its root element.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | required | Oldest first. Scaled to its own min and max. |
| tone | 'navy' | 'success' | 'danger' | 'muted' | 'navy' | Stroke colour. |
| width | number | 62 | Pixels. |
| height | number | 26 | Pixels. |
| label | string | undefined | Makes it role="img" with this name; without one it is decorative. |
Accessibility
- A sparkline never carries a number a reader needs. The KPI value beside it does.
Styles
The CSS as it appears in the app. The live component above is the same values as Tailwind classes.
.kpi-spark { width: 62px; height: 26px; flex-shrink: 0; }
.kpi-spark polyline { fill: none; stroke: var(--canvas); stroke-width: 1.5; stroke-linejoin: round; }
.kpi-spark circle { fill: var(--canvas); r: 2; }
.kpi-spark .area { fill: url(#spark-fade); } /* currentColor at 28% to 0%, top to bottom */