Shadcn.io is not affiliated with official shadcn/ui
About Journey Steps
A customer journey stepper block for React and Next.js with numbered step badges, vertical connecting lines, typical durations, key actions, alternating background accents, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Map the customer journey with this vertical stepper block for React and Next.js. Features six numbered steps from Discovery to Advocacy connected by vertical lines, each with a title, description, typical duration badge, and key action highlight. Steps alternate subtle background accents for visual rhythm with staggered entrance animations from top. Built with TypeScript, shadcn/ui Badge component, motion/react animations, and Tailwind CSS. Perfect for onboarding documentation, sales enablement pages, and customer success sections.
Related Components
Onboarding Process
New user onboarding flow
Methodology
Company methodology display
Workflow
Team workflow overview
Vertical Timeline
Vertical timeline display
Journey Steps
Customer journey stepper
Hiring Process
Recruitment process steps
FAQ
Was this page helpful?
Sign in to leave feedback.
Investors
A stacked investor cards block for React and Next.js with colored left border accents by investor type, investment thesis quotes, portfolio company lists, funding round details, and slide-from-left entrance animations built with shadcn/ui and Tailwind CSS
Key Moments
A vertical timeline key moments block for React and Next.js with left-rail timeline, impact-sized dot nodes, monospace year labels, impact badges, event descriptions, and alternating entrance animations built with shadcn/ui and Tailwind CSS