Shadcn.io is not affiliated with official shadcn/ui
Stepper Train Track
A railroad-inspired stepper wizard with parallel track lines, cross-ties, and station markers at each step built with React, Next.js, shadcn/ui, and Tailwind CSS
Navigate multi-step workflows with this train track stepper for React and Next.js. A horizontal railroad track with parallel rails and cross-ties connects station markers, where a highlighted train indicator sits at the active station. Completed stations show emerald platform fills while upcoming stations remain muted. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a memorable, metaphor-driven wizard experience.
Related Components
Journey Map Stepper
Winding path stepper with waypoint markers and curved route
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
Horizontal Numbered Stepper
Classic horizontal numbered stepper with progress lines
Dot Indicators Stepper
Minimal dot-based step progress indicators
FAQ
Was this page helpful?
Sign in to leave feedback.
Token Chips
A chip-based stepper with clickable rounded pill tokens, color-coded states, and inline status built with React, Next.js, shadcn/ui, and Tailwind CSS
Tree Branch
A tree-trunk stepper with alternating left-right branch nodes, organic connecting lines, and growth-themed progress tracking built with React, Next.js, shadcn/ui, and Tailwind CSS