@art-tools/react-gantt
A composable, virtualized Gantt chart for React. Every example below is live, and the code shown beneath it is the file that rendered it.
Install
pnpm add @art-tools/react-gantt
Then import the stylesheet once, at your app’s entry point: import "@art-tools/react-gantt/style.css";
Core
- Basic chartThe smallest thing that renders: a task array and a height.
- Read-only chartOne prop removes every editing affordance: no bar drag or resize, no progress or connector handles, no actions column.
- Custom columnsDefine the task-list columns yourself, including a render-prop action column.
- Hierarchy & bar typesParent/child nesting with summary, milestone, and task bars.
- DependenciesAll four link types, lag, and the cascading reschedule that follows a move.
- Working timeWeekends, holidays and business hours that the scheduler, drag and cascade all honour.
- Composable APIAssemble GanttProvider, TaskList and GanttGrid yourself for full layout control.
Customization
- Slots & slotPropsSwap or restyle any internal element, driven by its ownerState.
- Bar tooltipsThe built-in tooltip is one line of opt-in, then themable through its CSS variables.
- Tooltip from Base UIThe same slot filled with a third-party tooltip that brings its own root, trigger and positioning.
- Theming with CSS variablesRetheme the whole chart through --am-gantt-* custom properties, including dark mode.
- Theming with CSS ModulesScope the same tokens to one instance with a colocated CSS Module.
- Custom zoom ladderDefine your own zoom rungs, each with its own scales and column width.