Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/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
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 |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Keyboard: Arrow keys or
h/j/k/lmove through the chart;Enter/Spaceselect a point;Escapeclears the active point;rrestarts enabled animation. - Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
- Screen reader: Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.