Task Timeline
A compact Gantt: tasks as bars across days, drag a bar to reschedule, pull its end to resize, with a today line.
task-timeline.tsxtask-timeline.css
Checking access…
Overview
Each task is a bar on a day grid. Drag the bar to move it; drag its right edge to change its length. Bars snap to whole days.
Dependencies draw a thin connector; moving a task past its successor flags the clash. The today line anchors the view.
When to use
- Project planning, launch plans, content calendars.
When not to use
- Hundreds of tasks: use a full scheduling tool.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/task-timeline.json$
npx shadcn@latest add https://sundaeui.dev/r/task-timeline.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/task-timeline.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/task-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 task-timeline.tsx and task-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 { TaskTimeline } from '@/components/sundae/task-timeline'
<TaskTimeline />Props
| Prop | Type | Default |
|---|---|---|
tasks*Name, start day, length, dependsOn. | Task[] | — |
daysDays shown. | number | 14 |
onChangeCalled on change. | (tasks: Task[]) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each bar is a button: arrows move it a day, Shift+arrows change its length.
- Dates and clashes are in each bar’s label.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-ttl; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ← / →
- Move a day
- Shift + ← / →
- Shorten / lengthen
FAQ
- Is Task Timeline free?
- Task Timeline is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Task Timeline?
- Run npx shadcn@latest add https://sundaeui.dev/r/task-timeline.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Task Timeline support keyboard and screen readers?
- Each bar is a button: arrows move it a day, Shift+arrows change its length. Dates and clashes are in each bar’s label.
- Does Task Timeline respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →- Pro
Gantt 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