Primitive

Step Indicator

Compact segmented progress for multi-step flows.

Preview

components/ui/step-indicator.tsx

pnpm dlx shadcn@latest add @rhythmic-ui/step-indicator

Defaults to the Figma 14-step layout. Use currentStep to set the active segment count.

<StepIndicator currentStep={3} />
<StepIndicator currentStep={4} steps={8} aria-label="Step 4 of 8" />

Use through the configured namespace in consumer repos.

https://design.dev.rhythmic.io/r/step-indicator.json