Gantt timeline
ProA roadmap app screen where you drag gantt bars to reschedule, follow dependency arrows past a today line, zoom by day, week or month, and group by phase, team or owner. Selecting a task opens a details panel for owner, dates and progress, and the same plan also shows as a sortable list and an updates feed.
- A product or project roadmap page where tasks span weeks and depend on each other.
- Plans that people reschedule by dragging, with undo, conflict warnings, and per task details.
- Teams that need the same plan as a timeline, a sortable list, and a feed of changes.
- Use kanban-board or project-board for status columns without dates.
- Use week-calendar for time slots within days.
- Use timeline for a read-only list of dated events.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as a starting point and replace the sample data with your own.
"use client"; import { useState } from "react";import { GanttTimeline } from "@/components/arc/blocks/gantt-timeline/gantt-timeline";import type { GanttGroup, GanttTask, GanttTeam } from "@/components/arc/blocks/gantt-timeline/gantt-timeline"; const groups: GanttGroup[] = [ { id: "design", name: "Design" }, { id: "build", name: "Build" },]; const teams: GanttTeam[] = [ { id: "web", name: "Web", tone: "sky" }, { id: "api", name: "API", tone: "teal" },]; const initial: GanttTask[] = [ { id: "wires", name: "Wireframes", group: "design", team: "web", start: "2026-11-02", end: "2026-11-06", progress: 1, assignee: "emma-collins" }, { id: "ui", name: "Visual design", group: "design", team: "web", start: "2026-11-09", end: "2026-11-20", progress: 0.4, dependsOn: ["wires"] }, { id: "api", name: "API", group: "build", team: "api", start: "2026-11-09", end: "2026-11-27", progress: 0.2, assignee: "daniel-kim" }, { id: "beta", name: "Beta", group: "build", team: "web", start: "2026-11-30", end: "2026-11-30", milestone: true, dependsOn: ["ui", "api"] },]; export function RoadmapPage() { const [tasks, setTasks] = useState(initial); return ( <div style={{ height: "100dvh" }}> <GanttTimeline title="Q4 roadmap" workspace="Acme"API reference
7 parts. The first is the root.
GanttTimeline
A full roadmap screen inside the Arc app shell. The timeline groups tasks by phase, team, or owner, with a today line, dependency arrows that re-route as bars move and turn red on a conflict, and zoom that glides between day, week, and month. Drag a bar to move it or its edges to change dates. Selecting a task opens the details panel on demand to edit owner, team, phase, dates, and progress; the header's panel button opens the project overview. The sidebar lists the plan's milestones (selecting one opens it on the timeline) and saved views; the toolbar filters by name and by owner in a popover. A list view and an updates feed read the same plan. Fills its container. Also the default export.
titlestring"Atlas 4.0"Project name in the breadcrumbs and the overview panel.groupsGanttGroup[]GROUPSPhases in display order. Each task's group field refers to a group id.teamsGanttTeam[]TEAMSTeams with an Arc tone and an optional icon. The tone colours the bars and tints the icon, which marks the team in lanes, the list, and the team picker. They also power grouping by team.tasksGanttTask[]–Controlled tasks. Pair with onTasksChange.defaultTasksGanttTask[]TASKSStarting tasks when uncontrolled. Also sets the calendar range and the owner filter once on mount, and is what Reset restores.onTasksChange(tasks: GanttTask[], change: GanttChange) => void–Called after a move, resize, edit, add, delete, undo, or reset with the full list and what changed.todaystring"2026-11-12"ISO date that places the today line, the initial scroll, and every status.zoomGanttZoom–Controlled zoom: "day", "week", or "month".defaultZoomGanttZoom"week"Starting zoom when uncontrolled.onZoomChange(zoom: GanttZoom) => void–Called when the zoom control changes.collapsedstring[]–Controlled ids of folded lanes. Phase lanes use the group id, team lanes "team:<id>", and owner lanes "owner:<person id>".defaultCollapsedstring[]["discovery"]Lanes folded on first render when uncontrolled.onCollapsedChange(ids: string[]) => void–Called when a lane is folded or unfolded.defaultGroupingGanttGrouping"phase"How rows are grouped on first render: "phase", "team", or "owner".updatesGanttUpdate[]UPDATESSeed entries for the updates feed, newest first. Your own changes are added on top.workspacestring"Waypoint"Workspace name in the sidebar switcher (drawn with its own ScreenShellMark logo) and the breadcrumbs.classNamestring–Extra class on the root.GanttTask
Exported type. { id: string; name: string; group: string; start: string; end: string; progress?: number; assignee?: PersonId; dependsOn?: string[]; milestone?: boolean; team?: string; links?: GanttLink[] }. Dates are ISO days and end is inclusive; a milestone uses start only. progress runs from 0 to 1.
No props.
GanttTeam
Exported type. { id: string; name: string; tone: GanttTone; icon?: ComponentType<{ size?; strokeWidth?; className? }> }, where tone is one of Arc's categorical tones (teal, sky, orchid, violet, rose, amber, green) and icon is a lucide icon such as PenTool or Server. Without an icon a team shows a people glyph.
No props.
GanttLink
Exported type. { kind: "github" | "figma" | "stripe" | "apple" | "google"; label: string; detail?: string; url: string }. Shown with its brand mark in the details panel; selecting one copies the URL.
No props.
GanttGroup
Exported type. { id: string; name: string }.
No props.
GanttUpdate
Exported type. { id: string; person?: PersonId; text: string; task?: string; at: string }. Leave person out for the signed in person.
No props.
GanttChange
Exported type passed to onTasksChange. { id: string; start: string; end: string; kind: "move" | "resize" | "undo" | "reset" | "edit" | "add" | "delete" }.
No props.
- Tab
- Moves through the sidebar, the toolbar, and into the chart, where one bar is tabbable at a time.
- Arrow DownorArrow Up
- In the chart, moves focus to the next or previous visible bar and scrolls it into view. In the list view, moves between rows.
- Alt+Arrow LeftorRight
- Moves the focused task by one day.
- Alt+Shift+Arrow LeftorRight
- Changes the focused task's end date by one day.
- EnterorSpace
- Opens the focused bar in the details panel; on narrow frames the panel opens as a sheet.
- Escape
- Returns the details panel to the overview, closes an open list, or clears the filter text.
- /
- Focuses the task filter.
- Arrow LeftorRight on the zoom control
- Moves between day, week, and month.
- ⌘KorCtrl+K
- Focuses the sidebar search (from the app shell).
- Bars are role="button" with aria-roledescription "Task bar" or "Milestone", aria-pressed for selection, and a label with name, dates, percent done, and a warning when a dependency is violated. Hidden text describes the Alt shortcuts.
- Folded and filtered rows are aria-hidden and inert; lane toggles carry aria-expanded.
- Zoom is Arc's SegmentedControl (aria-pressed buttons with arrow keys) and grouping is Arc's Select. The owner filter is a Popover of labelled checkboxes, and the owner, team, and phase fields are listboxes inside a Popover with aria-activedescendant, Escape, and focus returned to the trigger.
- Sidebar milestones are buttons with aria-pressed for the selected one and a label that includes the date and whether the milestone is reached or in conflict.
- The footer status is role="status" and reports each change and conflict; other views keep a hidden live region.
- The list view is a real table with aria-sort on the sortable headers and one roving tab stop.
- Status is never colour alone: every status icon has a different shape and a text label in the badge and the list; milestones are diamonds and teams are icons, never coloured dots.
- Bars, arrows, lane summaries, and task rows read the same motion values, so they move together without drifting.
- After a drag, the bar springs to the snapped day from its release velocity; a dashed snap target and a date label show while dragging.
- Zoom animates the day scale on the smooth spring while keeping the middle of the view fixed; the header tiers crossfade.
- Changing the grouping glides each task to its new row while the new lane labels fade in; folding a lane slides its rows into the lane row.
- The details panel opens on the shell's spring and crossfades between the overview and a task; the view switch is one fade; summary numbers roll with AnimatedCounter and the done bar is Arc's Progress.
- Selection fills in place: a selected row, list row, or sidebar milestone gets a calm fill with no travelling highlight. Hover fills are instant.
- Reduced motion jumps bars, rows, scale, and scroll to their targets and removes the fades and presses.
- From 1080px the details panel sits beside the timeline; below that it is a sheet opened from the header or by selecting a task.
- Below 900px the sidebar becomes a sheet; below 600px the page goes edge to edge, header actions become icons, and toolbar labels drop to icons.
- When the chart is under 560px wide the sticky task column narrows to 136px and hides avatars and dates.
- The list view drops the owner column at 900px, the start column at 760px, and progress at 600px. The legend hides below 780px.
- Scrollbars are hidden everywhere; edge fades show where the chart, list, panel, or toolbar continues.
- Drag, zoom, regrouping, and folding update motion values; React re-renders on commit and when the snapped day changes.
- Each dependency arrow recomputes its path from motion values every frame while something moves; keep plans in the tens of tasks.
- The header and grid lines render one element per day at day zoom, so very long ranges add DOM weight.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as a whole roadmap page: it renders the app shell (sidebar, header, details panel) itself, so give it a parent with a definite height.
- The calendar range is computed once on mount from defaultTasks and today, starting on a Monday with a week before and four weeks after. In controlled mode pass defaultTasks as well.
- Statuses are derived: done at 100%, conflict when a task starts before one it depends on ends, behind when progress trails the elapsed share by more than 15 points, and not started before the start date.
- onTasksChange reports every edit; for moves and resizes persist change.id with the ISO dates. Undo keeps the last 30 changes, and slider drags fold into one step.
- Owners are PersonId values from @/components/arc/lib/media and render as seeded gradient avatars. Brand marks in links are sample content.
- Dependency conflicts are shown, not prevented. Validate on the server if a violation must be blocked.
The full library index for assistants is at /llms.txt.