Data & Chartsregistry/ui/tone-bar-list.tsx/r/tone-bar-list.json

ToneBarList

Interactive ranked comparison list with screentone fill bars, share percentages, and impact-burst leader badge.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Revenue by intervention

Last 7 days · click a row to invert

Dark · Flashback.f12-theme-dark

Interactive preview

Revenue by intervention

Last 7 days · click a row to invert

Install & copy-in source

shadcn CLI (tone-bar-list.json)

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

Usage example (ToneBarList)

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

export function ChannelBreakdown({ items }: { items: Array<{ id: string; name: string; value: number; share: number }> }) {
  return (
    <ToneBarList
      title="Revenue by intervention"
      subtitle="Last 30 days"
      items={items}
    />
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Each row is a native <button type="button" aria-pressed={selected}> inside a semantic list.
Selected rows invert to --f-ink with a --f-marker bar fill for unmistakable visual and ARIA state.

GrammarFRAME/12 rules

Design grammar

Unselected bars use a 5px × 5px halftone dot pattern (--f-tone) framed by a 2px ink rule.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/tone-bar-list.tsx)
Prop	Type	Default	Description
`items`	`ToneBarItem[]`	`required`	Ranked items with id, name, value, formattedValue, share (0..1), and optional badge.
`selectedId`	`string \| null`	`null`	Currently selected row ID for chart comparison filtering.
`onSelect`	`(id: string \| null) => void`	`undefined`	Callback fired when a row is toggled.
`changed`	`boolean`	`false`	Triggers the 3-pose .f12-enter list cascade and leader badge pop.