Shadcn.io is not affiliated with official shadcn/ui
Stepper Milestone Flags
A flag and pennant marker stepper with raised, waving, and lowered states along a horizontal progress line built with React, Next.js, shadcn/ui, and Tailwind CSS
Celebrate progress through milestones with this flag-based stepper for React and Next.js. Each step is a pennant flag planted along a horizontal line. Completed flags are raised with an emerald tint, the active flag waves with a blue highlight at a larger size, and upcoming flags remain lowered and muted. Clicking any flag reveals its milestone details below. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for an achievement-oriented wizard experience.
Related Components
Train Track Stepper
Railroad-inspired stepper with parallel rails and station markers
Journey Map Stepper
Winding path stepper with waypoint markers and curved route
Building Blocks Stepper
Stacking block metaphor with vertical tower growth
Circular Wheel Stepper
Radial wheel layout with center content display
Checkmark Trail Stepper
Trail of checkmarks showing completed progress
Horizontal Icons Stepper
Horizontal stepper using unique icons per step
FAQ
Was this page helpful?
Sign in to leave feedback.
Micro Dots
A micro dot stepper with hover-reveal labels, color-coded states, and minimal footprint built with React, Next.js, shadcn/ui, and Tailwind CSS
Mini Sidebar
A narrow sidebar stepper with numbered circles connected by a vertical line, hover tooltips, and a wide content panel built with React, Next.js, shadcn/ui, and Tailwind CSS