Radial Bars

Each arc sweeps on its own spring and its head runs hot while it moves, cooling to grey as it settles. Point at a ring, its legend row or use the arrow keys to light it in the accent while the others step back; the centre rolls to it on per-digit mass and reads it as a sentence. Options: a linked progress, list or row legend (hover isolates both ways, click hides a ring, hold locks it); an instrument tick ring with quarter labels; a scrubber hand that springs to the pointer's angle while rings short of it step back, so it reads as a threshold (“2 of 3 past 60%”); hatched ghost arcs running on to each ring's target; full, three-quarter or half sweeps with the ring names in the open quadrant; round caps; a hatch per ring; loading and empty states.

npx shadcn@latest add @obsyde/radial-bars

import { RadialBars } from '@/components/obsyde/ember/radial-bars/RadialBars';

export function Example() {
  return (
    <RadialBars rings={3} />
  );
}