Components
Sparkline
Tiny axis-free trend line rendered in SVG — colored via currentColor so it themes like any text element
Part of the chart family with Chart, Donut and Radar — reach for Chart when you need axes or tooltips.
Installation
- $npx litefy@latest add sparkline
- $pnpm dlx litefy@latest add sparkline
- $yarn dlx litefy@latest add sparkline
- $bun --bun litefy@latest add sparkline
Usage
A basic sparkline; color and size are plain Tailwind classes on className.
line
area
bar
flat
success
warning
"use client";
import { Sparkline } from "@/ui";
const trend = [12, 18, 15, 22, 19, 26, 24, 31, 28, 35, 33, 40];
const dip = [30, 28, 29, 24, 22, 25, 21, 18, 20, 16];
const flat = [20, 20, 20, 20, 20, 20];
export default function SparklineBasicDemo() {
return (
<div className="grid grid-cols-3 gap-6">
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">line</span>
<Sparkline data={trend} className="h-10 w-full text-primary" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">area</span>
<Sparkline data={trend} variant="area" smooth className="h-10 w-full text-primary" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">bar</span>
<Sparkline data={dip} variant="bar" className="h-10 w-full text-danger" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">flat</span>
<Sparkline data={flat} className="h-10 w-full text-muted-foreground" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">success</span>
<Sparkline data={trend} variant="area" smooth className="h-10 w-full text-success" />
</div>
<div className="flex flex-col gap-1">
<span className="text-xs text-muted-foreground">warning</span>
<Sparkline data={dip} variant="bar" className="h-10 w-full text-warning" />
</div>
</div>
);
}
API Reference
Sparkline
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | - | Raw values, mapped left to right |
variant | "line" | "area" | "bar" | "line" | Shape of the sparkline |
smooth | boolean | false | Monotone-cubic smoothing for line and area |
className | ClassNameValue | - | Size and color classes, e.g. h-8 w-32 text-primary |
...props | React.ComponentProps<"svg"> | - | Spread onto the root svg element |