Bring interactive project planning to your React app.
Drag tasks, connect dependencies, and organize projects into nested timelines. Working calendars, keyboard editing, and light and dark themes come built in.
Open source, MIT licensed, React 18 and 19, TypeScript types
pnpm add @jaeungkim/gantt-chartTry it
The chart below is the published component. Drag a bar, pull an edge, or draw a link between two rows.
Edit the plan directly
Drag to move, pull an edge to resize, drag the handle to set progress, draw an arrow to link two rows. Every gesture calls onTasksChange with the complete next array.
Keyboard and screen readers
An ARIA treegrid with a roving tabindex, arrow key navigation and keyboard edits announced in a status region. The accessibility page lists the gaps.
Explore larger plans
Rows and timeline ticks are both windowed, so the chart renders what is on screen plus a small overscan.
Move a whole project phase
Organize tasks into a collapsible hierarchy. Move a summary row and its children follow, keeping the phase together.
Plan around working days
Set the working weekdays, and give each holiday a name and a color. Turn on workingCalendar and a drop on a non-working day moves forward to the next working day.
Match your app
Every color reads from a CSS custom property. With no theme prop set, the chart follows the host page's color-scheme.
Read the docs
Every prop, guide and reference page, in English and Korean.