# Shadcn Gantt

> Open-source shadcn gantt components with split tree and timeline panes, drag scheduling, and progress rollups.

- Type: ReUI component, free
- Page: https://web.dev.reui.io/components/gantt
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/gantt.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/gantt.md
- MCP: `get_component("gantt")`, then `get_examples("gantt")`
- Examples: 7

## When to use

- Project plans where a tree of phases and tasks owns bars dragged and resized along a time axis
- Roadmaps, status reports and team capacity views read anywhere from a single day to a whole year
- Delivery tracked against a frozen plan, or work chained by dependency arrows and milestone diamonds

## When not to use

- A finished planner page with an edit dialog, dispatch rows and rules checked on drop: use the [Gantt blocks](https://web.dev.reui.io/blocks/application/gantt.md)
- A quarter of sales deals grouped by account, beside board, table and calendar views: use the [CRM blocks](https://web.dev.reui.io/blocks/solutions/crm.md)
- A list of dated steps or updates read in order, with no bars to drag or resize: use [Timeline](https://web.dev.reui.io/components/timeline.md) (`get_component("timeline")`)

## Agent notes

- Replace `buildBars`, which dates its sample bars from the start of the current week, with your own records
- Every example seeds bars through `defaultEvents` alone; pass `events` with `onEventsChange` to keep edits in your store

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- date-fns time zones v1: [API reference](https://github.com/date-fns/date-fns/tree/main/pkgs/tz#api), [docs](https://github.com/date-fns/date-fns/tree/main/pkgs/tz)
- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt), through the Base UI twin
- Radix UI v1: [docs](https://www.radix-ui.com/primitives/docs/overview/getting-started), through the Radix UI twin

## Examples

- [Settings Menu](https://web.dev.reui.io/components/gantt/c-gantt-1.md): Gantt chart with settings menu and schedulable rows. Best for a tabbed Settings popover with 12 display and behavior switches, 6 languages and 5 time zones, over empty rows waiting to be scheduled.
- [Drag Reorder](https://web.dev.reui.io/components/gantt/c-gantt-2.md): Gantt chart with drag-to-reorder tree rows. Best for the leanest setup, where one callback adds a drag grip to every tree row and a single setState keeps the new order.
- [Quarter Roadmap](https://web.dev.reui.io/components/gantt/c-gantt-3.md): Gantt chart with quarter roadmap and rollups. Best for multi month initiatives grouped by workstream, with a toolbar button that drops the next backlog item onto its empty row.
- [Capacity Board](https://web.dev.reui.io/components/gantt/c-gantt-4.md): Gantt chart with weekly capacity board. Best for teammates grouped by squad with avatar row labels and shaded weekends, where added assignments stack into extra lanes.
- [Task Table](https://web.dev.reui.io/components/gantt/c-gantt-5.md): Gantt chart with task table and progress. Best for a read only status report whose tree panel adds Owner avatars and Status badges as columns, with rows added from the toolbar.
- [Baseline Tracking](https://web.dev.reui.io/components/gantt/c-gantt-6.md): Gantt chart with as-built baseline tracking. Best for frozen plan dates ghosted behind actual bars, showing early, late and on time work plus a planned band on a whole group.
- [Dependencies & Milestones](https://web.dev.reui.io/components/gantt/c-gantt-7.md): Gantt chart with dependency arrows and milestones. Best for a rollout chain where QA waits on 2 build tracks and a zero length sign off gate opens the go live step.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.