Sparkline

Charts

A minimal, axis-free trend indicator.

Sparklines are tiny trend visualizations with no axes, grid, or tooltip. Drop one into a card header or table cell to add context to a metric without stealing attention.

npx shadcn@latest add sparkline

Default

A sparkline inside a card with a trend badge.

Preview

Live

Weekly visits+12.4%

Visits trended up this week.

tsx

1<Card>
2  <CardHeader>
3    <CardTitle>Weekly visits</CardTitle>
4    <CardDescription>Visits trended up this week.</CardDescription>
5  </CardHeader>
6  <CardContent>
7    <Sparkline data={sparklineData} height={48} />
8  </CardContent>
9</Card>

Custom

A taller, differently colored sparkline.

Preview

Live

tsx

1<Sparkline data={sparklineData} color="var(--color-chart-2)" height={64} />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
data	number[]	The values to plot from left to right.
color	string= "var(--color-primary)"	The stroke and fill color.
height	number= 48	The chart height in pixels.
width	string \| number= "100%"	The chart width.