Shadcn.io is not affiliated with official shadcn/ui
Timeline Horizontal Rail
React timeline with train-track rail design, notch markers, and hanging card entries using Next.js, shadcn/ui, and Tailwind CSS.
A horizontal rail timeline block built with React, Next.js, TypeScript, shadcn/ui, and Tailwind CSS. Features a thick rail with notch markers at each milestone and expandable card entries below. Uses Lucide React icons and train-track aesthetics for a bold, structured visual. Perfect for version histories, deployment logs, and feature rollouts.
Related Components
Horizontal Scroll Timeline
Scrollable timeline with alternating entries above and below
Horizontal Cards Timeline
Card entries hanging below a horizontal rail
Horizontal Stepper Timeline
Step-by-step progress with numbered circles
Horizontal Compact Timeline
Dense date-range segments on a bar
Horizontal Rail Timeline
Train-track rail with hanging card entries
FAQ
Was this page helpful?
Sign in to leave feedback.