Sparkline

Dependency-free SVG mini chart — smooth line, gradient area or bars — for cards and table cells. Server-component safe.

2 files · 96 locdeps: clsx, tailwind-merge

type="area"

type="line"

type="bar"

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/sparkline.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs sparkline

import { Sparkline } from "@/components/opus/ui/sparkline";

<Sparkline data={[3, 5, 4, 8, 7, 10]} type="area" />

Prop	Type	Default	Description
data	number[]	—	Series.
type	"area" \| "line" \| "bar"	"area"	Mark type.
width / height / strokeWidth	number	120 / 36 / 1.75	Geometry.
color / smooth / showLast	string / boolean	—	Style.