127 Components
Kinetic Step Indicator
NavigationMulti-step workflow progress bar with spring-filled liquid connector tubes, elastic checkmark badges, and direct step jumping.
Spring SolverHooke's Law tuning
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/kinetic-step-indicator.json"
Props
TypeScript props supported by <KineticStepIndicator />.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | StepSpec[] | — | Array of workflow steps containing id, label, and caption. |
| defaultStep | number | 1 | Initial 0-based active step index. |
| stiffness | number | 320 | Spring stiffness coefficient for connector tube fill and node scale. |
| damping | number | 25 | Spring damping coefficient controlling connector fill settle. |
Key Features
- Origin-left scaleX spring connector tubes that fill and drain smoothly between step nodes.
- Direct click-to-jump step buttons paired with sequential Prev and Next controls.
- Elastic scale pulse on the currently active step node.
Keyboard & Accessibility
- Marks the active step button with aria-current='step' and descriptive step aria-labels.
- Supports both direct Tab selection on step nodes and sequential Prev/Next buttons.
- Disables connector tube spring oscillation when prefers-reduced-motion is active.