A tiny smooth line with an optional area fill and a glowing end dot that draws in on mount.
npx shadcn@latest add https://hyperblur.dev/r/sparkline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sparkline.tsx.
import { Sparkline } from "@/components/hyperblur/sparkline"
<Sparkline data={[4, 7, 6, 9, 8, 12, 11, 15]} color="#22c55e" height={48} />| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | required | Values to plot, left to right. Needs at least two points to draw a line. |
| color | string | "#2f7bff" | Stroke, area and end dot color. |
| height | number | 40 | Height in pixels. Width fills the parent. |
| strokeWidth | number | 2 | Line thickness in pixels. |
| fill | boolean | true | Show the gradient area under the line. |
| animate | boolean | true | Draw the line in on mount. Skipped for reduced motion. |