Radial Stack
Stacked bars standing out from a ring, one per category, sorted by total so the dial reads as a spiral from the largest at 12 o’clock round to the smallest.
$149 once · every Pro piece
Layers darken toward the centre and brighten outward. Short codes sit on the spokes, rotated to read outward, and compact value rings give the scale in the gap at the top. Bars rise in a clockwise cascade. Point at a bar or step with the arrow keys: the others step back and the centre rewrites itself as a sentence with rolling digits, naming the largest layer and its share; point at a layer and that series isolates round the whole dial. One category can be pinned hot. Legend toggles restack on springs.
Install
npx shadcn@latest add @obsyde/radial-stackNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { RadialStack } from '@/components/obsyde/ember/radial-stack/RadialStack';
export function Example() {
return (
<RadialStack />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/radial-stack/RadialStack.tsxcomponentember/radial-stack/radial-stack.cssstylesember/radial-stack/RadialStackDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/state-messages.tsxsharedember/viz-kit/size.tssharedember/viz-kit/shape.tssharedember/viz-kit/scale.tssharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/radial.tsxsharedember/viz-kit/radial.csssharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/motion.tssharedember/viz-kit/focus.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/Legend.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
pointsCategories | number | 40 |
seriesSeries | number | 5 |
sortSort by total | boolean | true |
highlightPin one | boolean | true |
ringsValue rings | boolean | true |
legendLegend | 'row' | 'none' | 'row' |
patternPattern | 'none' | 'series' | 'none' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
sizeSize | number | 520 |
seedSeed | number | 8 |