Back to work
Case study
In progress
Stepper
2026 / Frontend + product UI
A shadcn-style Stepper primitive with source ownership, ordered steps, keyboard navigation, guards, content panels, docs, tests, and registry output.
Stack
Next.jsReactTypeScriptTailwind CSSShadcn/uiVercel
Stepper
Stepper is a lightweight primitive for real multi-step product flows. It is distributed through the shadcn registry so teams can copy the component source into their app, own it locally, and adapt the UI without handing workflow state to a black box.
The component stays intentionally narrow: it reflects progress and navigation, while the app keeps form state, routing, validation, persistence, and server actions. The docs explain that boundary through installation, API, composition, forms, adapters, and examples.
- Built a typed Stepper API with controlled and uncontrolled state, horizontal and vertical orientation, disabled and completed states, and navigation helpers.
- Added accessible triggers, content regions, keyboard navigation, duplicate-step warnings, and async navigation guards.
- Published registry files, docs, demo blocks, Vitest coverage, release automation, and a production docs site.