# Project Timeline block

> Project gantt with resizable tree columns, split timeline panes, and inline editing

Project timeline on ReUI Gantt: task tree in a resizable split pane beside a day-to-year timeline, drag and resize bars with live validation, progress rollups, and an edit dialog. ReUI Gantt with shadcn Dialog, Select. Roadmap, project planner.

- Type: Pro block
- Category: [Gantt](https://web.dev.reui.io/blocks/application/gantt.md)
- Page: https://web.dev.reui.io/blocks/application/gantt/gantt-1
- 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_block("gantt-1")`
- Built with: Alert Dialog, Avatar, Badge, Button, Button Group, Calendar, Card, Checkbox, Combobox, Context Menu, Dialog, Dropdown Menu, Gantt, Input, Item, Label, Popover, Select, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Task lists with subtasks, dependency arrows picked in the edit dialog, an assignee filter and parent progress rollups

## Agent notes

- Replace `DEMO_TASKS`, `DEMO_PEOPLE`, `buildTaskMeta` and `buildDemoBars` in data.ts with your lists, owners, task fields and bars
- `copyTaskLink` copies the page origin plus a demo tasks path; point it at your own task page
- `canReorderResource` and `handleResourceReorderReject` pin the demo `perf-audit` row by id; key them off your own locked tasks

## When not to use

- People booked by percent of their week, refused once a day is full: use [Resource Capacity](https://web.dev.reui.io/blocks/application/gantt/gantt-4.md) (`get_block("gantt-4")`)
- One day of timed field visits on a half hour ruler: use [Technician Dispatch](https://web.dev.reui.io/blocks/application/gantt/gantt-2.md) (`get_block("gantt-2")`)

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

```bash
npx shadcn@latest add @reui/gantt-1
```

## About Gantt blocks

### When to use

- A full page planner whose rows of tasks, people or stages own bars that are dragged, resized and edited
- Schedules that check a rule on every drop: a locked bar, opening hours, upstream order or capacity
- Project roadmaps, one day field dispatch, agent run boards and team capacity plans

### When not to use

- Only the scheduling primitive, to wire into your own layout with no demo rules: use [Gantt](https://web.dev.reui.io/components/gantt.md) (`get_component("gantt")`)
- Deals re-dated on bars beside table, board and calendar views of the same records: use the [CRM blocks](https://web.dev.reui.io/blocks/solutions/crm.md)
- A feed of past activity or milestones that people read rather than reschedule: use the [Timeline blocks](https://web.dev.reui.io/blocks/application/timeline.md)

### Agent notes

- Each block wraps its `Card` in an `h-svh` page with `p-4` padding; remove that wrapper when the board sits inside an app shell
- Every block opens on a fixed 2026 demo day passed to `defaultDate` and builds its bars around it; swap both for today and your records
- Refused drops and saved changes call `toast` from `sonner`, and no block mounts a Toaster; render one in your app or those messages never appear

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.