Ring Stack
Concentric ring bars on a semicircle, a 270° horseshoe or a full circle: one ring per group, its parts stacked end to end along the arc over a faint track that stands for what is left, with percent ticks along the outside.
$149 once · every Pro piece
The rings sweep on in turn. Point at a ring and the others step back while the centre switches to it with rolling digits; point at a part and that part lights in every ring. A ring past its limit runs hot at its leading edge, the one ember on the dial. The progress-row legend rolls to the hovered ring’s values, isolates parts both ways, and click hides a part while the rest close up on springs.
Install
npx shadcn@latest add @obsyde/ring-stackNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { RingStack } from '@/components/obsyde/ember/ring-stack/RingStack';
export function Example() {
return (
<RingStack arc="semicircle" pattern="parts" legend="row" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/ring-stack/RingStack.tsxcomponentember/ring-stack/ring-stack.cssstylesember/ring-stack/RingStackDemo.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' |
arcArc | 'semicircle' | 'horseshoe' | 'full' | 'semicircle' |
endsEnds | 'square' | 'round' | 'square' |
ringsRings | number | 3 |
fillFill | number | 1 |
limitLimit % | number | 90 |
legendLegend | 'progress' | 'row' | 'none' | 'progress' |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'parts' | 'none' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
sizeSize | number | 460 |
seedSeed | number | 2 |