Pesto UI

Timeline Track

Spans laid out on a shared horizontal axis — today's scheduled runs, a release plan, a rota. Each item takes a start and an end in the axis's own units and the track places it.

tsx
import { TimelineTrack, TimelineItem } from "@pestoui/core"

A day of runs

start and end set the axis — hours here. ticks are spread evenly across it and each draws a gridline. An item's media slot trails its label.

  1. Inbox triage, 8.5 to 11
  2. Content drafts, 10:00 to 13.5
  3. Lead research, 13 to 15
  4. Weekly report, 15.5 to 17.5

Small rows

size="sm" on the track sets the row height for every item; an item can override it for itself.

  1. Research, W1 to 2.5
  2. Build, W2 to W4
  3. Review, 3.5 to W5

Props

PropTypeDefaultDescription
start / endnumber—On TimelineTrack. Required. The left and right edges of the axis, in whatever unit the items use. end must be greater than start.
ticksstring[][]On TimelineTrack. Axis labels, spread evenly from start to end. Each also draws a gridline.
size"sm" | "default""default"On TimelineTrack. Default row height for the items inside: 28 or 36px.
formatValue(value: number) => string—On TimelineTrack. Renders a position for the hidden span text. Defaults to the tick it lands on.
from / tonumber—On TimelineItem. Required. Start and end positions on the track's axis.
labelReactNode—On TimelineItem. Required. The span's name; truncates inside the bar.
mediaReactNode—On TimelineItem. Trailing slot — an avatar stack, a count, a status dot.
tone"selected" | "info" | "success" | "warning" | "destructive" | "muted" | "chart-1" … "chart-5""selected"On TimelineItem. The bar's border and wash.
TimelineItem size"sm" | "default"—On TimelineItem. Overrides the track's size for this row alone.
rangeLabelstring—On TimelineItem. Replaces the hidden span text, which defaults to the track's formatted from–to.
PreviousTick StripNext Toast

Pesto UI · 117 documented components