Gantt Timeline
A compact project Gantt: task bars on a week grid, drag a bar to reschedule, dependencies shift along, and a today line.
gantt-timeline.tsxgantt-timeline.css
Checking access…
Overview
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.
When to use
- Project overviews, sprint plans, launch checklists.
When not to use
- Hundreds of tasks or resource levelling: use a full PM tool.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/gantt-timeline.json$
npx shadcn@latest add https://sundaeui.dev/r/gantt-timeline.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/gantt-timeline.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/gantt-timeline.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy gantt-timeline.tsx and gantt-timeline.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { GanttTimeline } from '@/components/sundae/gantt-timeline'
<GanttTimeline />Props
| Prop | Type | Default |
|---|---|---|
tasks*Tasks (start is a day index). | { id: string; name: string; start: number; days: number; done: number; after?: string }[] | — |
daysVisible days. | number | 14 |
todayToday index. | number | 4 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-gnt; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ← / →
- Move a focused bar by a day
FAQ
- Is Gantt Timeline free?
- Gantt Timeline is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Gantt Timeline?
- Run npx shadcn@latest add https://sundaeui.dev/r/gantt-timeline.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Gantt Timeline support keyboard and screen readers?
- Bars are sliders with the start day as value text; arrow keys move them. Dependency pushes are announced.
- Does Gantt Timeline respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →- Pro
Task Timeline
Data · Refined OKR Tracker
Data · Refined- Pro
Kanban Board
Data · Understated Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Tick Gauge
Data · Refined