Shadcn.io is not affiliated with official shadcn/ui
Stepper 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
Navigate complex multi-step flows at a glance with this minimap stepper for React and Next.js. A compact horizontal minimap in the header shows all steps as small blocks with the active position highlighted, while the main area displays the detailed vertical stepper below. Click any minimap segment to jump instantly. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for long wizard flows.
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
Help Panel Stepper
Two-panel stepper with contextual help sidebar
Clickable Jump Stepper
Non-linear stepper with click-to-jump navigation
Condensed Timeline Stepper
Compact timeline-style stepper with timestamps
FAQ
Was this page helpful?
Sign in to leave feedback.
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
With Notes
A vertical stepper with expandable team notes and comment counts per step built with React, Next.js, shadcn/ui, and Tailwind CSS