Shadcn.io is not affiliated with official shadcn/ui
Stepper Zigzag Path
A zigzag path stepper wizard with alternating left-right steps connected by diagonal lines, progress tracking, and expandable content built with React, Next.js, shadcn/ui, and Tailwind CSS
Navigate complex workflows with this zigzag path stepper for React and Next.js. Steps alternate between left and right positions connected by diagonal SVG lines, creating a visually engaging path that guides users through each stage. Completed steps glow emerald, the active step pulses blue, and upcoming steps remain muted. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a distinctive multi-step experience.
Related Components
Tree Branch Stepper
Organic tree trunk stepper with alternating branch nodes
Ribbon Tape Stepper
Winding ribbon stepper with segment-based progress
Staircase Cascade Stepper
Cascading staircase stepper with descending indentation
Dual Track Stepper
Parallel frontend and backend track stepper with sync points
Journey Map Stepper
Journey map stepper with milestone markers
Milestone Flags Stepper
Flag-based milestone stepper with progress indicators
FAQ
Was this page helpful?
Sign in to leave feedback.
With Preview
A two-panel stepper wizard with a vertical step navigator and live preview panel that updates as configuration options change built with React, Next.js, shadcn/ui, and Tailwind CSS
401 Unauthorized
A 401 unauthorized error page block for React and Next.js with authentication prompts and social sign-in built with shadcn/ui and Tailwind CSS