Sparkline

stablev1.0.0·open in canvas

Inline SVG trend line; tone follows series direction (sign discipline) unless overridden.

Installnpx shadcn add @cids/sparkline

Live demo

Motion · tap to replay

honors reduced-motion

None (data surfaces never bounce).

This component declares no motion.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Sparkline } from "@/design-system";

<Sparkline data={closes} />
<Sparkline data={closes} label="7-day price trend" tone="neutral" />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

--buy
--sell
--fg-muted

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

Static; re-renders with data.

Inline SVG trend line; tone follows series direction (sign discipline) unless overridden.

Anatomy

/\_/\__/  <- polyline, 1.25 stroke, buy/sell by direction
84 x 28 default box

Props

Prop	Type	Default	Notes
`data`	`number[]`	--	Oldest -> newest; needs >= 2 points (else renders nothing).
`tone`	`"buy"`	"sell" \	"neutral"`	direction	Default: last >= first -> buy.
`label`	`string`	--	Sets `role="img"` + name; omitted = `aria-hidden` decorative.
`width` / `height`	`number`	84 / 28	Viewbox + rendered size.
`className`	`string`	--	cn-merged.

Motion

None (data surfaces never bounce).

· Decorative by default (aria-hidden); pass label to name it as an image.
· Never the only carrier of direction -- pair with a signed value.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.