Shadcn.io is not affiliated with official shadcn/ui
Stepper With Help Panel
A two-panel stepper wizard with vertical step navigation on the left and a contextual help sidebar on the right that displays step-specific tips, warnings, and documentation links built with React, Next.js, shadcn/ui, and Tailwind CSS
Guide users through complex setup flows with this help panel stepper for React and Next.js. The left panel shows a vertical stepper with form fields, while the right panel displays contextual help that changes with each step, including tips, warnings, and documentation links. Built with TypeScript, shadcn/ui Button, Badge, and Separator components, and Tailwind CSS for developer onboarding and integration wizards.
Related Components
Animated Transitions Stepper
Stepper with smooth CSS transitions between steps
Responsive Adaptive Stepper
Stepper that adapts layout for horizontal and vertical contexts
Analytics Sidebar Stepper
Two-panel stepper with usage metrics dashboard
Minimap Stepper
Long stepper with minimap position indicator
Split Panel Stepper
Two-panel stepper with sidebar navigation and content area
Descriptions Stepper
Stepper with detailed descriptions for each step
FAQ
Was this page helpful?
Sign in to leave feedback.
With Descriptions
A horizontal stepper with titles and description lines below each step, connected by progress lines, built with React, Next.js, shadcn/ui, and Tailwind CSS
With Minimap
A long vertical stepper with a clickable minimap header showing a bird's-eye view of all steps as colored rectangles with the current position highlighted for quick navigation built with React, Next.js, shadcn/ui, and Tailwind CSS