Timeline

Virtualized timeline with time-scale bars, dependency paths, and snapped drag edits.

Also known as: gantt, schedule, bar timeline

Installation

Install with the CLI, or copy the component source into your project.

Add timeline (npm)

npx --yes -p @default-file/ui df-ui add timeline

Default

Virtualized rows on a day scale with progress fill on each bar. Scroll for more workstreams and later dates.

Name
Jul 2026
Aug 2026
Sep 2026
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Dependencies

Directed edges between row ids draw connector paths across the time scale.

Name
Jul 2026
Aug 2026
Sep 2026
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Time scale

zoom sets the fine tick unit to day, week, month, or quarter. Coarse headers stay aligned with the chosen unit.

Name
Jul 2026
Aug 2026
Sep 2026
Jul 5-11
Jul 12-18
Jul 19-25
Jul 26-1
Aug 2-8
Aug 9-15
Aug 16-22
Aug 23-29
Aug 30-5
Sep 6-12
Sep 13-19
Sep 20-26
Sep 27-3

Snapped edits

Drag a bar or its edges to edit dates. Arrows move, Shift or Alt resize, Enter commits, Escape cancels, and edits snap to the scale.

Name
Jul 2026
Aug 2026
Sep 2026
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Row meta

renderRowMeta adds trailing content in the label column. onRowClick reports the activated row.

Selected Workstream 01

Name
Jul 2026
Aug 2026
Sep 2026
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Loading

Placeholder rows while the schedule loads. The grid sets aria-busy.

Name
Jul 2026
Aug 2026
Sep 2026
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Empty

Custom empty content when there are no rows.

Name
Jul 2026
Aug 2026
Sep 2026
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

No workstreams in this range.

Properties

Virtualized timeline with shared row scroll, time-scale bars, dependency routing, and snapped drag edits. Requires @tanstack/react-virtual.

Timeline

PropTypeDefaultNotes
rowsTimelineRow[]-Row models with id and label (required).
visibleRangeTimelineVisibleRange-Inclusive ISO date range for the scale ({ start, end }) (required).
dependenciesTimelineDependencyEdge[][]Directed edges between row ids ({ fromId, toId }) drawn as dependency paths.
zoom"day" | "week" | "month" | "quarter""day"Fine tick unit for the time scale.
loadingbooleanfalseShow placeholder rows and set aria-busy.
emptyContentReactNode-Content when there are no rows and loading is false.
overscannumber6Extra virtual rows rendered outside the viewport.
estimateRowSizenumber-Estimated row height in pixels for virtualization. Defaults to the kit row height token.
onBarChange(id: string, next: TimelineBarChange) => void-Called when a bar finishes a pointer or keyboard edit with ISO start and due.
onRowClick(id: string) => void-Called when a row is activated.
renderRowMeta(row: TimelineRow) => ReactNode-Optional trailing content in the row label column.
aria-labelstring-Accessible name for the treegrid. Defaults to the kit string catalogue. Override when the host supplies a visible heading.
classNamestring-Additional styles on the root.

TimelineRow

PropTypeDefaultNotes
idstring-Stable row id (required).
labelReactNode-Label column content (required). Prefer a string so the bar cell can reuse it as part of its accessible name.
startstring-ISO start date for the bar.
duestring-ISO due date for the bar.
progressnumber-Optional completion fraction for the bar fill.
colorTokenstring-CSS custom property name used as the bar fill, for example --success.

Accessibility

Treegrid name: Pass aria-label when a visible title is not enough; otherwise the catalogue default names the grid. Row labels: Prefer string labels so gridcells can announce the item. Non-string labels fall back to a catalogue item name. Live region: Drag and keyboard edits announce the new date range.