Shadcn.io is not affiliated with official shadcn/ui
Stepper Horizontal Icons
A horizontal icon-based stepper with unique icons per step, connecting lines, and step content area built with React, Next.js, shadcn/ui, and Tailwind CSS
Build intuitive multi-step wizards with this horizontal icon stepper for React and Next.js. Each step is represented by a unique Lucide icon inside a circle, connected by progress lines that fill as users advance. The active step highlights in blue while completed steps glow emerald. Built with TypeScript, shadcn/ui Button components, and Tailwind CSS for a visually engaging workflow experience.
Related Components
Horizontal Numbered Stepper
Classic horizontal numbered stepper with progress lines
Vertical Numbered Stepper
A vertical stepper layout with numbered circles and connecting lines
Vertical Icons Stepper
Vertical icon-based stepper with expandable content
Breadcrumb Chevrons Stepper
Breadcrumb-style stepper with chevron separators
Tab Navigation Stepper
Stepper styled as navigable tabs
Dot Indicators Stepper
Minimal stepper with dot indicators for each step
FAQ
Was this page helpful?
Sign in to leave feedback.
Gradient Fill
A horizontal stepper with a gradient progress bar from emerald to blue, circular step markers, and smooth fill transitions built with React, Next.js, shadcn/ui, and Tailwind CSS
Horizontal Numbered
A horizontal numbered stepper wizard with clickable steps, progress tracking, and step content built with React, Next.js, shadcn/ui, and Tailwind CSS