Data & Chartsregistry/ui/tone-spark.tsx/r/tone-spark.json

ToneSpark

Compact daily bar sparkline filled with 45° rotated SVG screentone dots that wipe on twos.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Daily profit (7 days)

Dark · Flashback.f12-theme-dark

Interactive preview

Daily profit (7 days)

Install & copy-in source

shadcn CLI (tone-spark.json)

npx shadcn@latest add https://frame12.dev/r/tone-spark.json

Usage example (ToneSpark)

import { ToneSpark } from '@/components/frame12';

export function DailyProfitSpark() {
  return <ToneSpark label="Daily profit" values={[420, 510, 490, 610, 580, 640, 710]} rangeKey={7} />;
}

WCAG AAAccessibility guarantees

Accessibility notes

Renders role="img" with a descriptive aria-label summarizing the series and bar count.

GrammarFRAME/12 rules

Design grammar

Uses a 4px × 4px rotated SVG pattern (#uid-st) with a 2px solid --f-rule baseline.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/tone-spark.tsx)
Prop	Type	Default	Description
`values`	`number[]`	`required`	Daily numeric values rendered as one screentone bar per day.
`label`	`string`	`required`	Uppercase monospace caption rendered above the sparkline.
`rangeKey`	`string \| number`	`undefined`	Key that replays the stepped bar reveal when changed.