CleenUI · Project Management · TaskRoadmap

TaskRoadmap

Pro

Timeline-based task visualization with phases, dependencies, and zoom from day to quarter.

storybook.cleenui.com · project-management-taskroadmap--default
Open in new window

About TaskRoadmap

TaskRoadmap presents tasks as horizontal bars on a timeline. Phases group related work; dependencies render as connecting arrows. Zoom levels span from day-by-day all the way to quarter-by-quarter so the same data serves both sprint planning and roadmap reviews.

Drag a bar to reschedule, drag its edge to resize, drag from one bar to another to create a dependency. Critical-path calculation highlights the longest chain of dependent work automatically.

When to use it

  • Quarterly roadmap planning across teams.
  • Sprint-level Gantt for individual project tracking.
  • Customer implementation timelines with dependencies.
  • Marketing campaign and content calendars.

Common props

Prop
Type
Description
phases
Phase[]
Phase groupings.
tasks
Task[]
Task records with start, end, dependencies.
zoom
"day" | "week" | "month" | "quarter"
Initial zoom level.
onReschedule
(task, newRange) => void
Fires on drag.
showCriticalPath
boolean
Highlight the critical path.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.