Shadcn.io is not affiliated with official shadcn/ui
Timeline Horizontal Compact
React horizontal timeline with colored segments, hover details, and proportional date ranges using Next.js, shadcn/ui, and Tailwind CSS.
A compact horizontal timeline block built with React, Next.js, TypeScript, and Tailwind CSS. Displays date ranges as colored segments on a proportional bar with hover-to-reveal details. Uses Lucide React icons for visual indicators. Perfect for Gantt-style overviews, sprint planning boards, and resource allocation dashboards.
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 Rail Timeline
Train-track rail with hanging card entries
Horizontal Compact Timeline
Dense date-range segments on a bar
FAQ
Was this page helpful?
Sign in to leave feedback.