Data display · Application UI
Gantt
Draggable timeline / roadmap chart, sidebar, multi-range header, status-tinted feature bars, milestone diamonds, today line. Auto-centers on today; a GanttControls toolbar drives timescale + zoom, with density and read-only presentation variants. Adapted from kibo-ui.
@byronwade/foundation@byronwade/utils@byronwade/button@byronwade/card@dnd-kit/core@dnd-kit/modifiers@uidotdev/usehooksdate-fnsjotailodash.throttle@phosphor-icons/react
Feature showcase
Installation
Features
4 examples
Default, Controls, Compact, Read Only.
API
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| @byronwade/card | registry | Installed through the byronwade/ui registry. |
| @dnd-kit/core | npm | Installed from npm. |
| @dnd-kit/modifiers | npm | Installed from npm. |
| @uidotdev/usehooks | npm | Installed from npm. |
| date-fns | npm | Installed from npm. |
| jotai | npm | Installed from npm. |
| lodash.throttle | npm | Installed from npm. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/gantt.tsx |
| Default example | content/examples/gantt/default.tsx |
| Controls example | content/examples/gantt/controls.tsx |
| Compact example | content/examples/gantt/compact.tsx |
| Read Only example | content/examples/gantt/read-only.tsx |