Terminal
█
dither-sparkline-demo █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Installation
$ pnpm dlx shadcn@latest add @termcn/opentui/dither-sparkline
Usage
import { Sparkline } from "@/components/ui/dither-sparkline";<Sparkline
color="blue"
data={[18, 26, 23, 41, 37, 52, 49, 63]}
height={4}
markerIndex={5}
title="Requests"
variant="gradient"
width={28}
/>Examples
Fill and marker variants
Sparklines support every dither fill. Add markerIndex to highlight a specific sample without enabling interaction.
Terminal
█
dither-sparkline-variants █
Loading preview... █
█
█
█
█
█
█
█
█
█
█API Reference
| Prop | Type | Default |
|---|---|---|
data | number[] | required |
color | string | required |
width | number | 24 |
height | number | 4 |
variant | "gradient" | "dotted" | "hatched" | "solid" | "gradient" |
markerIndex | number | null | null |
animate | boolean | false |
bloom | "off" | "low" | "high" | "aura" | BloomConfig | "off" |
noColor | boolean | false |
screenReaderMode | boolean | false |