# Pm Timeline Gantt Chart

Visual schedule of phases inside the project detail record.

- id: `pm-timeline-gantt-chart`
- Page: https://agentic-ui-kit.com/components/pm-timeline-gantt-chart
- Live preview: https://agentic-ui-kit.com/live/template/admin-kit/project-management/timeline-gantt?piece=pm-timeline-gantt-chart

## Install

```bash
agentic-ui add pm-timeline-gantt-chart
npx shadcn@4.17.0 add @agentic-ui/pm-timeline-gantt-chart
```

## Metadata

- **Level:** block
- **Category:** block
- **Template:** Kestrel Admin Kit
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** milestone-bars, phase-grouping, start-end-markers, progress-overlay
- **Intents:** track-status, compare-over-time
- **Suits domains:** project-management, operations, saas
- **Interaction:** timeline-scroll, phase-hover
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Visual schedule of phases inside the project detail record, Lightweight Gantt chart for product roadmaps
- **Avoid when:** Visualizations with no notion of calendar or duration
- **Preserve when adapting:** timeline-bar-geometry, phase-group-card
- **Replace when adapting:** phase-names, date-markers
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.85/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 8/10, code 9/10
- **Uses primitives:** card, badge, progress, scroll-area
- **npm dependencies:** lucide-react
- **Used in:** Kestrel Admin Kit (template)
- **npm dependencies (registry):** date-fns@4.1.0, lucide-react@0.577.0
- **Registry dependencies:** lib-admin-kit-utils, ui-admin-kit-button, ui-admin-kit-separator