Shadcn.io is not affiliated with official shadcn/ui
Stepper 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
Navigate freely between steps with this clickable jump stepper for React and Next.js. Unlike traditional linear wizards, every step is accessible at any time with visual tracking of visited versus unvisited steps and a prominent active state. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for non-linear multi-step workflows.
Related Components
Keyboard Nav Stepper
Stepper with visible keyboard shortcut hints and arrow key navigation
Auto Advance Stepper
Stepper that auto-advances after task completion with pause control
Drag Reorder Stepper
Stepper with draggable steps for custom reordering
Inline Editing Stepper
Stepper with editable step titles and inline save actions
Horizontal Numbered Stepper
Classic horizontal numbered stepper with progress lines
Tab Navigation Stepper
Tab-style stepper with underline active indicator
FAQ
Was this page helpful?
Sign in to leave feedback.
Circular Wheel
A radial wheel stepper with steps arranged on a circle perimeter, arc progress segments, and dynamic center content built with React, Next.js, shadcn/ui, and Tailwind CSS
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