Shadcn.io is not affiliated with official shadcn/ui
Stepper Nested Substeps
A hierarchical stepper wizard with main steps that expand to reveal nested sub-steps with independent progress tracking built with React, Next.js, shadcn/ui, and Tailwind CSS
Structure complex workflows with this nested substeps stepper for React and Next.js. Main steps act as chapters with expandable sub-steps listed beneath them, similar to a table of contents with sections and subsections. Each level tracks its own progress with visual indicators. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for hierarchical multi-step navigation.
Related Components
Collapsible Groups Stepper
Stepper with collapsible grouped sections and progress tracking
Tree Branch Stepper
Tree-structured stepper with branching visual hierarchy
Accordion Expand Stepper
Accordion-style stepper with expandable active step content
Search Steps Stepper
Stepper with searchable step navigation
Parallel Tracks Stepper
Stepper with multiple concurrent parallel tracks
Undo History Stepper
Stepper with undo and redo navigation history
FAQ
Was this page helpful?
Sign in to leave feedback.
Multi Form Merge
A parallel multi-form stepper with independent form sections that converge into a final submission step built with React, Next.js, shadcn/ui, and Tailwind CSS
Onboarding Guide
A friendly app onboarding wizard stepper with horizontal dot progress, illustration placeholders, step descriptions, and skip/continue navigation built with React, Next.js, shadcn/ui, and Tailwind CSS