React Stepper / Wizard
A multi-step wizard: numbered indicators for completed, current, and upcoming steps, a connector that fills as you progress, per-step content, and built-in Back / Next controls (the last step calls onFinish). Uncontrolled by default; pass current + onChange to drive it yourself. Completed steps are clickable to go back.
Configure parameters
Pick key sizes (128 / 192 / 256) and the cipher modes to include.
Installation
npx shadcn@latest add "https://kelvinui.com/registry/stepper.json"
Props
| Prop | Type | Description |
|---|---|---|
| steps | Step[] | { title, description?, content? } per step |
| current | number | Controlled active index |
| defaultCurrent | number | Initial index when uncontrolled (default 0) |
| onChange | (index: number) => void | Fires when the active step changes |
| onFinish | () => void | Fires when Next is pressed on the last step |
| hideControls | boolean | Hide the built-in Back / Next buttons |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.