Components

Sparkline

A tiny, axis-less, label-less trend chart — the shape of a series at a glance, sized to sit inside a StatCard, a table cell, or beside a Stat.

Install

npx shadcn@latest add @alix/sparkline

Preview

area

line

bar

Usage

<Sparkline data={[12, 14, 13, 18, 22, 21, 27]} />
<Sparkline type="line" color="var(--chart-2)" data={…} />
<Sparkline type="bar" color="var(--destructive)" data={[5, 4, 6, 3, 2]} />

Examples

Colour by trend

Use colour to reinforce trend meaning when the adjacent metric already carries the precise value.

<div className="grid w-full max-w-md grid-cols-3 gap-6">
  <Sparkline data={[12, 14, 15, 18, 21, 24]} color="var(--success)" />
  <Sparkline data={[22, 21, 20, 18, 15, 13]} color="var(--destructive)" />
  <Sparkline data={[14, 14, 15, 14, 15, 15]} color="var(--muted-foreground)" />
</div>

Height control

Adjust height when a sparkline needs to fit a table row, a dense card, or a larger summary tile.

<div className="grid w-full max-w-md grid-cols-3 items-end gap-6">
  <Sparkline height={24} data={[8, 10, 9, 12, 14, 16]} />
  <Sparkline height={40} data={[8, 10, 9, 12, 14, 16]} />
  <Sparkline height={56} data={[8, 10, 9, 12, 14, 16]} />
</div>

Trend cell in a table

DataTable owns row comparison while Sparkline adds compact shape beside the numeric Delta.

Practice momentum

Last six reporting periods

Practice momentum
Practice	Change	Trend
Turnaround	+12.4%
Performance	+4.8%
Transactions	-3.2%

<Panel title="Practice momentum" description="Last six reporting periods" flush>
  <DataTable
    caption="Practice momentum"
    dense
    rows={[
      { practice: "Turnaround", change: "+12.4%", direction: "up" as const, intent: "positive" as const, trend: [18, 20, 21, 24, 27, 31] },
      { practice: "Performance", change: "+4.8%", direction: "up" as const, intent: "positive" as const, trend: [22, 22, 23, 24, 24, 25] },
      { practice: "Transactions", change: "-3.2%", direction: "down" as const, intent: "negative" as const, trend: [30, 29, 28, 27, 26, 25] },
    ]}
    columns={[
      { key: "practice", header: "Practice", cell: (row) => row.practice, cellClassName: "font-medium" },
      {
        key: "change",
        header: "Change",
        numeric: true,
        cell: (row) => <Delta value={row.change} direction={row.direction} intent={row.intent} size="sm" />,
      },
      {
        key: "trend",
        header: "Trend",
        align: "right",
        width: "8rem",
        cell: (row) => <Sparkline data={row.trend} height={28} />,
      },
    ]}
  />
</Panel>

When to use it

Use it for

Tiny trend shapes inside StatCard, DataTable cells, or compact dashboard summaries.
Series where the precise values are already shown by a nearby Stat, Delta, or table column.
Area for continuous trend, line for the lightest mark, and bar for discrete periods.

Reach for something else

Charts that need axes, labels, tooltips, or legends — use Chart instead.
The primary value itself — use Stat or StatCard instead.
Status or direction without historical shape — use Delta instead.

Props

Prop	Type	Default	Description
data	number[]	—	The series, in order. Plain numbers — a sparkline shows shape and volatility, not readable values.
type	"area" \| "line" \| "bar"	"area"	Render style. area reads as a trend, bar as discrete periods.
color	string	"var(--chart-1)"	Any CSS colour. Pass var(--success)/var(--destructive) to colour by trend.
height	number	40	Height in px; width always fills the container.