Run Timeline
Multi-lane execution timeline showing run phases over time, with optional cursor. Install Run Timeline from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
4 storiesView componentGantt Chart
Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales. Install Gantt Chart from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
What it is and when to use
Gantt Chart is a dependency-free, SVG-free React component for project planning. Reach for it to visualize scheduled work as horizontal task bars grouped into phases, with optional progress overlays, milestone diamonds, and a today indicator across day, week, month, or quarter scales. The left column lists group and task names; the right renders the timeline. Drag-to-edit, dependency arrows, and critical-path highlighting are out of scope — you drive data through the groups prop.
DataPreview
Switch between light and dark to inspect the embedded Storybook preview.
Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales. Part of the data family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | — | Not available |
Installation
Add Gantt Chart to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/gantt-chart.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Gantt Chart?
- Gantt Chart is a dependency-free React component that renders project timelines as task bars with progress overlays, milestone markers, and a today line across day, week, month, or quarter scales.
- How do I add Gantt Chart?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/gantt-chart.json` to install it into your project via the shadcn CLI.
- Does Gantt Chart support drag-to-edit or dependency arrows?
- No. Drag-to-edit, dependency arrows, critical-path highlighting, and virtualization are intentionally out of scope; you supply and update task data through the groups prop and drive those behaviors yourself.