Shadcn.io is not affiliated with official shadcn/ui
React Horizontal Stepper Timeline Block
React step-by-step timeline with numbered circles, progress bar, and pulsing animation using Next.js, shadcn/ui, and Tailwind CSS.
A horizontal stepper timeline block built with React, Next.js, TypeScript, and Tailwind CSS. Features numbered circles with completion states, pulsing current step indicator, and connector lines. Uses Lucide React icons for check marks and visual indicators. Perfect for onboarding flows, deployment pipelines, and multi-phase project tracking.
React Horizontal Stepper Timeline Block preview
Installation
Related Components
Horizontal Scroll Timeline
Scrollable timeline with alternating entries above and below
Horizontal Cards Timeline
Card entries hanging below a horizontal rail
Horizontal Compact Timeline
Dense date-range segments on a bar
Horizontal Rail Timeline
Train-track rail with hanging card entries
Horizontal Stepper Timeline
Step-by-step progress with numbered circles
FAQ
Was this page helpful?
Sign in to leave feedback.
React Horizontal Scroll Timeline Block
React scrollable timeline with alternating entries, dot markers, and central line using Next.js, shadcn/ui, and Tailwind CSS.
React Icon Markers Timeline Block
React vertical timeline with Lucide icon markers, expandable events, and badges using Next.js, shadcn/ui, and Tailwind CSS.