Shadcn.io is not affiliated with official shadcn/ui
Stepper Size Weighted
A horizontal stepper with proportionally sized step circles reflecting task complexity, time estimates, connecting lines, and active step highlighting built with React, Next.js, shadcn/ui, and Tailwind CSS
Communicate step complexity at a glance with this size-weighted stepper for React and Next.js. Each step circle scales proportionally to its estimated effort, making it immediately clear which steps require more attention. Time estimates and weight labels reinforce the visual hierarchy. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for an informative, visually distinct wizard experience.
Related Components
Fraction Counter Stepper
Large fraction display with arrow navigation
Percentage Display Stepper
Large percentage number with progress bar
Gradient Fill Stepper
Progress bar with gradient fill and step markers
Animated Pulse Stepper
Pulsing active step indicator with dot trail
Time Estimates Stepper
Stepper with time estimates for each step
Milestone Flags Stepper
Stepper with milestone flag markers
FAQ
Was this page helpful?
Sign in to leave feedback.
Single Line
A typography-only stepper where all steps appear on one line with checkmarks, strikethrough, and inline navigation built with React, Next.js, shadcn/ui, and Tailwind CSS
Slide Transitions
A horizontal slider stepper with left and right arrow navigation, position indicator bar, step counter, and smooth content transitions built with React, Next.js, shadcn/ui, and Tailwind CSS