Shadcn.io is not affiliated with official shadcn/ui
Stepper Collapsible Groups
A grouped stepper wizard where steps are organized into collapsible sections with per-group progress tracking built with React, Next.js, shadcn/ui, and Tailwind CSS
Organize complex multi-step workflows into logical groups with this collapsible groups stepper for React and Next.js. Steps are clustered under collapsible section headers like Setup, Configure, and Launch, each showing its own completion progress. Expand any group to see and navigate its child steps. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for structured, scalable wizard experiences.
Related Components
Accordion Expand Stepper
Accordion-style stepper with expandable active step content
Nested Substeps Stepper
Stepper with expandable nested sub-steps under each main step
Search Steps Stepper
Stepper with searchable step navigation
Sidebar Nav Stepper
Two-panel stepper with sidebar 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.
Clickable Jump
A non-linear horizontal stepper with click-to-jump navigation, visited step tracking, and direct access to any step built with React, Next.js, shadcn/ui, and Tailwind CSS
Command Palette
A command palette style stepper navigator with search filtering and keyboard-driven step selection built with React, Next.js, shadcn/ui, and Tailwind CSS