ns-ui

Gantt ASCII Critical Path

A project schedule where a real CPM forward/backward pass computes each task's float and draws it: critical bars are heavy `━` in accent, every other bar trails its slack as literal `·` dots, and dragging a task re-runs the pass so the critical chain visibly moves.

Use when Pick gantt-ascii-critical-path when the point is scheduling slack — which tasks carry float and which chain the delivery date actually rides on — and the reader should be able to drag a task and watch criticality move to a different chain. schedule-ascii-freebusy is for finding a free slot across several people's calendars rather than a dependency-scheduled plan; timeline-agent-lanes is for concurrent runtime activity in swimlanes; timeline-changelog-wave is for a chronological event feed with no dependency math.

Install

npx shadcn add https://design.helpmarq.com/r/gantt-ascii-critical-path.json
View source and playground

ns-ui / gantt-ascii-critical-path

Checkout replatform━critical   ─ has float   · slack day
W12W13W14W15W16
┌
┬──────┬─┊────┬──────┬──────┬───
Discovery inter…│
Wireframe review│
Design system │
API contract │
Integrate payme…│
Checkout UI bui…│
Launch comms │
QA regression p…│
Production roll…│

25 days critical chain 6 tasks 3 tasks carry float

The heavy accented bars are the zero-float chain the ship date actually rides on. Every other bar trails one dot per day of slack. Drag a bar, or focus one and press Arrow Left / Arrow Right — the forward and backward pass reruns and criticality moves to whichever chain went tight.

Props

PropTypeDefaultDescription
tasks?GanttTask[]——
cols?number—timeline cells drawn per row
today?number—day index marked by the `┊` column. A fixed prop, never new Date()
startWeek?number—week number printed at the first tick
title?string——
className?string——
Back to the catalog