A tiny line, area or bar chart without axes, for a trend next to a number or in a table cell.
$ pnpm dlx shadcn@latest add https://dashral.com/r/sparkline.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/sparkline.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
components.json
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/sparklineUsage
example.tsx
import { Sparkline } from "@/components/dashral/sparkline"
<Sparkline data={[12, 18, 15, 22, 28, 26, 34]} variant="area" showLast aria-label="Sign-ups rising from 12 to 34 this week" />Examples
In a table
Color it with a text color — green when rising, red when falling.
API reference
Sparkline
Also takes every prop of <div>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
data | number[]Oldest first. Required. | — |
variant | "line" | "area" | "bar" | "line" |
showLast | booleanA dot on the latest value. | false |
min / max | numberScale limits; min={0} starts at zero. | the data's |
aria-label | stringSay what the trend means. | "Trend from … to …" |
className | stringSize and color (a text color). | "h-8 w-full text-primary" |
Accessibility
- role="img" with your label: describe the trend in words (“Rising from $1.2K to $2.4K”).
Motion
- The line draws itself (bars grow) when it first shows; instant with reduced motion.