build69
build69  /  Components  /  Timelines  /  TimelineHorizontal

TimelineHorizontal

v1.0.3Updated 20 Jul 2026

Gantt-light horizontal timeline with milestones and optional multi-lane rows. Use for roadmaps and release schedules.

Preview

Live · 7 stories
RoadmapOpen ↗
Why this is recommendedtimelinehorizontalganttroadmap+2

TimelineHorizontal — roadmap.

Recommended for+14
  • Roadmaps
  • Release schedules
  • Project Gantt overviews
Tags+6
timelinehorizontalganttroadmaplanesmilestones
Features+4
  • Horizontal time axis
  • Single or multi-lane rows
  • Milestone markers
  • Day / week / month tick granularity
  • Hover tooltip per event
Not recommended for−2
  • Vertical audit logs (use TimelineAudit)
  • Single-event narratives (use TimelineCentered)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "TimelineHorizontal" })

Usage

import { TimelineHorizontal } from '@/components/data-display/timeline-horizontal';

<TimelineHorizontal lanes={lanes} from={start} to={end} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
lanes

Lanes with events

TimelineHorizontalLane[]yes
from

Range start

Dateyes
to

Range end

Dateyes

Related