Shadcn.io is not affiliated with official shadcn/ui
Stepper Checkmark Trail
A horizontal checkmark trail stepper with connected circles, animated state transitions, and form-style step content built with React, Next.js, shadcn/ui, and Tailwind CSS
Build elegant multi-step verification flows with this checkmark trail stepper for React and Next.js. Completed steps display filled emerald circles with white check icons, the active step pulses blue with the step number, and upcoming steps show empty muted circles, all connected by a horizontal line. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for a polished account setup or verification wizard.
Related Components
Linear Progress Stepper
Continuous linear progress bar with diamond markers
Segmented Progress Stepper
Progress bar split into colored segments per step
Circle Indicators Stepper
Circular ring indicators showing per-step completion
Dot Indicators Stepper
Ultra-minimal dot-based stepper navigation
Horizontal Numbered Stepper
Classic horizontal numbered circle stepper
Horizontal Icons Stepper
Horizontal stepper using unique icons per step
FAQ
Was this page helpful?
Sign in to leave feedback.
Change History
A vertical stepper with last-modified timestamps, author attribution, and update indicators per step built with React, Next.js, shadcn/ui, and Tailwind CSS
Checkout Flow
A complete e-commerce checkout stepper wizard with cart, shipping, payment, and confirmation steps built with React, Next.js, shadcn/ui, and Tailwind CSS