Gantt
A project timeline you work by hand. Drag a bar to move it and its edges to resize; dependency arrows reroute live as you drag, turning dashed red the moment a successor starts before its predecessor ends.
$149 once · every Pro piece
Milestones are diamonds, groups carry summary bars, and today is a single accent line. Day, week and month zoom on a spring, anchored on the middle of the view, with the header labels cross-fading as the scale passes them. Collapse a phase and its rows glide up into it. Keyboard: arrows walk the tree, Shift moves and Alt resizes by a unit, Enter folds, + and − zoom, T jumps to today.
Install
npx shadcn@latest add @obsyde/ganttNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Gantt } from '@/components/obsyde/ember/gantt/Gantt';
export function Example() {
return (
<Gantt />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/gantt/Gantt.tsxcomponentember/gantt/gantt.cssstylesember/gantt/GanttDemo.tsxdemoember/segmented/segmented.csssharedember/segmented/Segmented.tsxsharedember/shared/ember.csssharedember/actions-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/display-kit/motion.tsshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
zoomZoom | 'day' | 'week' | 'month' | 'week' |
dependenciesDependencies | boolean | true |
collapsedFolded | 'none' | 'discovery' | 'all' | 'none' |
readOnlyRead-only | boolean | false |
stateState | 'ready' | 'loading' | 'empty' | 'error' | 'ready' |