Components
Sparkline
Compact SVG trend line from an array of numbers.
A small inline series, ported from Atlas. No chart library and no framer-motion: a
polyline in a 0 0 100 100 viewBox. Default stroke is text-primary. strokeGradient
paints support → primary (--color-support to --color-primary) so the ramp follows
the look, not a hardcoded ICS yellow→purple.
Give the parent a height. The SVG fills it.
Line, filled, then gradient. The mark is decorative (aria-hidden); put the number
beside it in the card or cell.
Usage
import { Sparkline } from '@/components/ui/sparkline';
<div className="h-20 w-[300px]">
<Sparkline data={[10, 15, 12, 25, 22, 30]} strokeGradient />
</div>Install
shadcn add @gesso/sparkline