Roadmap Timeline
An editable project roadmap: a collapsible list of phases, tasks and milestones beside a time canvas that pans and zooms smoothly around the pointer from days to quarters.
$149 once · every Pro piece
Drag bars to move them, their edges to resize, the knob to set progress, and from a bar's end to another bar to link them; with auto-schedule on, dependents spring along when you push their predecessor. Rounded finish-to-start connectors, group summary bars, an accent today line and an optional critical path. Full keyboard path: arrows walk the rows, Shift moves and Alt resizes by a unit, Enter renames, and every change is announced. Under 640px the list becomes a drawer.
Install
npx shadcn@latest add @obsyde/roadmapNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Roadmap } from '@/components/obsyde/ember/roadmap/Roadmap';
export function Example() {
return (
<Roadmap />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/roadmap/Roadmap.tsxcomponentember/roadmap/roadmap.cssstylesember/roadmap/schedule.tsmoduleember/roadmap/RoadmapDemo.tsxdemoember/segmented/segmented.csssharedember/segmented/Segmented.tsxsharedember/shared/ember.csssharedember/actions-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tsshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
zoomZoom | 'day' | 'week' | 'month' | 'quarter' | 'month' |
dependenciesDependencies | boolean | true |
autoScheduleAuto-schedule | boolean | true |
criticalPathCritical path | boolean | false |
progressProgress | boolean | true |
densityRow density | 'compact' | 'comfortable' | 'compact' |
readOnlyRead-only | boolean | false |