## Gantt Timeline (S—292)

A compact project Gantt: task bars on a week grid, drag a bar to reschedule, dependencies shift along, and a today line.

- URL: https://sundaeui.dev/components/gantt-timeline
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/gantt-timeline.json`
- Tags: timeline, schedule, project, tasks, planning, gantt

Each task is a bar spanning its start and length in days. Dragging a bar moves it in whole days; tasks that depend on it are pushed so they never start before it ends.
Progress is a darker inner fill. Arrow keys on a focused bar move it a day at a time.

### Usage

```tsx
import { GanttTimeline } from '@/components/sundae/gantt-timeline'

<GanttTimeline />
```

### Props

- `tasks` (`{ id: string; name: string; start: number; days: number; done: number; after?: string }[]`, required): Tasks (start is a day index).
- `days` (`number`, default `14`): Visible days.
- `today` (`number`, default `4`): Today index.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Project overviews, sprint plans, launch checklists.

### When not to use

- Hundreds of tasks or resource levelling: use a full PM tool.

### Accessibility

- Bars are sliders with the start day as value text; arrow keys move them.
- Dependency pushes are announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Move a focused bar by a day