Shadcn.io is not affiliated with official shadcn/ui
Stepper Journey Map
A winding path stepper with SVG curved route, numbered waypoint markers, and animated progress trail built with React, Next.js, shadcn/ui, and Tailwind CSS
Chart your users through multi-step flows with this journey map stepper for React and Next.js. A winding SVG path curves through the component with numbered waypoint markers at each step. Completed waypoints display flag icons, the active waypoint pulses with a blue highlight, and the path fills with emerald as progress advances. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a distinctive road-trip-inspired wizard experience.
Related Components
Train Track Stepper
Railroad-inspired stepper with parallel rails and station markers
Milestone Flags Stepper
Flag pennant markers planted along a progress line
Building Blocks Stepper
Stacking block metaphor with vertical tower growth
Circular Wheel Stepper
Radial wheel layout with center content display
Zigzag Path Stepper
Zigzag-style stepper with alternating direction
Checkmark Trail Stepper
Trail of checkmarks showing completed progress
FAQ
Was this page helpful?
Sign in to leave feedback.
Inline Form
An inline form stepper with numbered section badges, expandable form areas, collapsible summaries, and progressive disclosure built with React, Next.js, shadcn/ui, and Tailwind CSS
Keyboard Nav
A keyboard-accessible stepper with visible shortcut badges, arrow key hints, and focus ring indicators for data pipeline workflows built with React, Next.js, shadcn/ui, and Tailwind CSS