Gantt Chart React component
A project timeline with tasks grouped into collapsible phases, bars you drag to move or stretch to resize, milestones, dependency arrows that turn red and dashed when a task starts too early, one-click auto-scheduling, day and week zoom, a today line, keyboard moves and a details bar with a progress slider.
About the Gantt Chart component
Gantt Chart lays a project out on a timeline: tasks grouped into phases, each a bar from its start to its end, with milestones as diamonds and arrows showing what has to finish first.
You can plan right on the chart. Drag a bar to move it, drag its right edge to change its length, and set progress from the details bar. If a task now starts before something it depends on is done, the arrow turns red and Auto-schedule fixes every conflict in one click.
When to use it
Use it for project plans, launches, roadmaps with dates, production schedules or anything where order and timing both matter.
For work without dates that moves through stages, a kanban board is a better fit.
Installation
Add the Gantt Chart component to your project with the shadcn CLI. It lands in components/gantt-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/gantt-chartOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<GanttChart /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Website relaunch" |
| projectStart | string | "2026-11-02" |
| days | number | 42 |
| today | number | 10 |
| phases | { id: string; name: string; color: string }[] | PHASES |
| tasks | { id: string; phase: string; name: string; start: number; duration: number; progress: number; owner?: string; dependsOn?: string[] }[] | TASKS |
| onTasksChange | (tasks: GanttTask[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Website relaunch"
- projectStartstringDefault: "2026-11-02"
- daysnumberDefault: 42
- todaynumberDefault: 10
- phases{ id: string; name: string; color: string }[]Default: PHASES
- tasks{ id: string; phase: string; name: string; start: number; duration: number; progress: number; owner?: string; dependsOn?: string[] }[]Default: TASKS
- onTasksChange(tasks: GanttTask[]) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Gantt Chart FAQ
- How do I save changes?
- Pass onTasksChange. It is called after a drag ends, after a keyboard move, after auto-scheduling and when progress changes, with the full task list.
- What does Auto-schedule do?
- It walks tasks in dependency order and moves each one to start no earlier than the end of everything it depends on. Lengths never change, and tasks that are already fine stay where they are.
- Why are days numbers?
- Tasks store a start day and a length counted from projectStart. That keeps dragging and dependency math simple and avoids time zone issues. Convert to dates when you save.
- Does it work on phones?
- Yes. The task list narrows to names and the timeline scrolls sideways under it. Dragging uses pointer events, so bars move with a finger too.
- Is it accessible?
- Every bar and milestone is a button that announces its dates and progress. Arrow keys move a focused bar by a day and Shift + arrows change its length. Phases are buttons with aria-expanded, and the details bar updates politely.
