Sparkline
ProA tiny line, area or bar trend drawn in SVG without a chart library, colored with chart tokens through currentColor.
npx prodular-ui add sparklinePart of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing
Variants
Line, area and bar. Each takes its color from the text color.
Line
Area
Bar
import { Sparkline } from "@/components/ui/sparkline"
const requests = [320, 340, 310, 380, 420, 405, 460, 440, 510, 530, 498, 560, 610, 590, 640]const errors = [12, 9, 14, 8, 6, 9, 7, 5, 6, 4, 5, 3, 4, 3, 2]const deploys = [3, 5, 2, 6, 4, 7, 5, 8, 6, 4, 9, 7, 6, 8]
export default function SparklineVariants() { return ( <div className="grid w-full max-w-md gap-x-8 gap-y-6 sm:grid-cols-3"> <div className="flex flex-col gap-2"> <span className="text-[13px] text-muted-foreground">Line</span> <Sparkline data={requests} className="h-10 w-full" showLastPoint label="Requests per minute, rising" /> </div> <div className="flex flex-col gap-2"> <span className="text-[13px] text-muted-foreground">Area</span> <Sparkline data={errors} variant="area" className="h-10 w-full text-chart-2" label="Error rate, falling" /> </div> <div className="flex flex-col gap-2"> <span className="text-[13px] text-muted-foreground">Bar</span> <Sparkline data={deploys} variant="bar" className="h-10 w-full text-chart-3" label="Deploys per day" /> </div> </div> )}In a list
Next to a value in a row. Straight segments read better at very small sizes.
- api-gateway182 ms
- billing-worker640 ms
- search-indexer96 ms
- webhooks1.2 s
import { Sparkline } from "@/components/ui/sparkline"
const services = [ { name: "api-gateway", p95: "182 ms", data: [210, 205, 198, 190, 196, 188, 184, 182], tone: "text-chart-1" }, { name: "billing-worker", p95: "640 ms", data: [420, 450, 470, 520, 560, 590, 610, 640], tone: "text-warning-subtle-foreground" }, { name: "search-indexer", p95: "96 ms", data: [110, 104, 101, 99, 102, 98, 97, 96], tone: "text-chart-1" }, { name: "webhooks", p95: "1.2 s", data: [380, 420, 610, 840, 900, 1020, 1150, 1210], tone: "text-destructive-subtle-foreground" },]
export default function SparklineInline() { return ( <ul className="w-full max-w-sm divide-y rounded-xl border bg-card shadow-xs"> {services.map((s) => ( <li key={s.name} className="flex items-center gap-4 px-4 py-3"> <span className="min-w-0 flex-1 truncate font-mono text-[13px] text-foreground">{s.name}</span> <Sparkline data={s.data} curved={false} className={`h-6 w-20 ${s.tone}`} showLastPoint /> <span className="w-16 text-right text-sm font-medium tabular-nums">{s.p95}</span> </li> ))} </ul> )}Anatomy
<Sparkline data={[12, 18, 15, 22, 28]} className="h-8 w-24 text-chart-1" showLastPoint />Guidance
Use it when
- Next to a number, to show which way it has been moving.
- In table cells and KPI strips where a full chart would be too much.
Avoid
- Anything people need to read exact values from. Use Chart with axes and tooltips.
- Fewer than five points. A delta says more.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Size it with classes (h-6 w-20, or w-full) and color it with text-chart-1 to text-chart-5, or a status text token such as text-warning-subtle-foreground. Never pass hex colors.
- Pass label when the trend matters to the reader; without it the sparkline is hidden from screen readers.
- Pass data oldest first. Use variant="bar" for counts per period and line or area for continuous metrics.
- Set min to 0 when the baseline matters, otherwise small changes look dramatic.
API
Sparkline
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | The series, oldest first. | |
| variant | "line" | "area" | "bar" | "line" | Shape. |
| curved | boolean | true | Monotone curve that never overshoots the data. |
| showLastPoint | boolean | false | Dot on the latest value. |
| strokeWidth | number | 1.5 | Line width in px. It does not scale with the box. |
| min / max | number | Fix the y range, for example min={0}. | |
| label | string | Accessible description. Without it the element is aria-hidden. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add sparkline# or, with the registry in components.jsonnpx shadcn@latest add @prodular/sparkline