KQ-547 · GANTT/LANE

Gantt Lane

A plan on three weeks of grid. Bars arrive a shift from their lane in cascade() order on glide, hovering or focusing one lights its whole chain and draws the connectors with pathLength on flick, and dragging a bar tracks the pointer 1:1, pushes any dependent it would overrun, then settles onto the whole day on snap. Left and Right nudge the focused bar a day, Up and Down walk the lanes, Enter pins the chain and Escape unpins it.

KQ-547 · GANTT/LANE

Fieldline launch

Apr 6Apr 13Apr 20

Scope lockApr 6 to Apr 9
BuildApr 9 to Apr 15
Copy passApr 10 to Apr 14
ReviewApr 15 to Apr 18
Beta cohortApr 18 to Apr 23
LaunchApr 23 to Apr 26

Hover a bar, or drag it to a new day

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/gantt-lane

Props

tasks: GanttTask[]; default —; Seeds the lanes as day offsets from the chart start; the chart owns positions after that and reports through onChange.
days: number; default 21; Columns in the grid. The lanes scroll horizontally under edge fades when they outrun the viewport.
today: number; default —; Day offset the today line stands on. Omit it and no line is drawn.
onChange: (tasks: GanttTask[]) => void; default —; Fires with the whole plan after a drag settles or a keyboard nudge lands.
formatDay: (day: number) => string; default Day {n}; Names a day offset for the header ticks, the bars' aria-describedby dates and the live readout.
onActiveChange: (id: string | null) => void; default —; Fires with the hovered or focused task id, or null when nothing is lit.
label: React.ReactNode; default —; Visible chart label. Omit it and pass aria-label to name the chart invisibly.

Prop	Type	Default	Description
tasks	GanttTask[]	—	Seeds the lanes as day offsets from the chart start; the chart owns positions after that and reports through onChange.
days	number	21	Columns in the grid. The lanes scroll horizontally under edge fades when they outrun the viewport.
today	number	—	Day offset the today line stands on. Omit it and no line is drawn.
onChange	(tasks: GanttTask[]) => void	—	Fires with the whole plan after a drag settles or a keyboard nudge lands.
formatDay	(day: number) => string	Day {n}	Names a day offset for the header ticks, the bars' aria-describedby dates and the live readout.
onActiveChange	(id: string \| null) => void	—	Fires with the hovered or focused task id, or null when nothing is lit.
label	React.ReactNode	—	Visible chart label. Omit it and pass aria-label to name the chart invisibly.