Gantt chart
ProA project plan on a time axis: grouped tasks, milestones, dependency arrows, the critical path, late dependencies flagged, and bars you drag or move with Alt and the arrows while dependent tasks follow.
pnpm dlx shadcn@latest add @caliper/gantt-chartBilling redesign
Alt and ← → move a task by a day; add Shift to change its length.
When to use #
Use it for
- Project and launch planning.
- Construction, events and anything with hard dependencies.
Skip it when
- A backlog without dates; use the kanban board.
Installation #
pnpm dlx shadcn@latest add @caliper/gantt-chart
Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source. It is built from criticalPath, shiftDependents and GanttChart.
import { criticalPath, shiftDependents, GanttChart } from "@/components/ui/gantt-chart"
The worked example comes with Pro
The 23-line example behind the preview opens here with a Pro or Team licence.
API reference #
criticalPath
component
No props of its own; it accepts the native props of its root element.
shiftDependents
component
No props of its own; it accepts the native props of its root element.
GanttChart
component
Accessibility #
It exposes treegrid, row, columnheader, gridcell, button and status semantics, with aria-labelledby, aria-label, aria-level, aria-expanded, aria-hidden and aria-describedby kept in step with state. Changes that matter are announced through a live region.
Motion #
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.