Components / Timeline track

Timeline track

Explore every variant and expand each example’s formatted usage code.

Timeline track

Move and resize timeline events with per-event colors and weighted phases.

Interactive timeline track

024

Build stays solid blue. Review pairs violet feedback with an orange approval phase. Segment weights define the relative phase lengths and scale when resized.

Drag an event to move it, or drag either edge to resize. Focus an event or edge and use Left/Right arrows.

<TimelineTrack
  rows={rows}
  selected={selected}
  range={{ start: 0, end: 24 }}
  formatValue={(value) => `${String(value).padStart(2, '0')}:00`}
  onSelect={setSelected}
  onEventChange={(id, event) =>
    setRows((current) =>
      current.map((row) => (row.id === id ? { ...row, event } : row)),
    )
  }
/>
<p>
  Build stays solid blue. Review pairs violet feedback with an orange
  approval phase. Segment weights define the relative phase lengths and
  scale when resized.
</p>
<p>
  Drag an event to move it, or drag either edge to resize. Focus an event
  or edge and use Left/Right arrows.
</p>