Shadcn.io is not affiliated with official shadcn/ui
Stepper Split Panel
A two-panel stepper wizard with a vertical step sidebar and content area for settings and configuration flows built with React, Next.js, shadcn/ui, and Tailwind CSS
Build settings wizards and configuration flows with this split panel stepper for React and Next.js. A fixed sidebar shows numbered steps with titles, descriptions, and status indicators while the right panel displays the active step's full content and form fields. Built with TypeScript, shadcn/ui Button, Badge, and Separator components, and Tailwind CSS for a professional two-panel layout.
Related Components
Card Content Stepper
Stepper with numbered indicators and swappable content panels
Accordion Expand Stepper
Stepper with accordion-style expanding sections
Stacked Cards Stepper
Overlapping stacked card stepper with depth effect
Dialog Wizard Stepper
Modal-style wizard with progress bar and step content
Sidebar Nav Stepper
Sidebar navigation stepper with clickable steps
Vertical Numbered Stepper
Vertical stepper layout with numbered circles and connecting lines
FAQ
Was this page helpful?
Sign in to leave feedback.
Slide Transitions
A horizontal slider stepper with left and right arrow navigation, position indicator bar, step counter, and smooth content transitions built with React, Next.js, shadcn/ui, and Tailwind CSS
Stacked Cards
An overlapping stacked card stepper where the active step is displayed on top with upcoming cards peeking behind to create a visual depth effect built with React, Next.js, shadcn/ui, and Tailwind CSS