║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Gantt description: The Gantt chart is a powerful tool for visualizing project schedules and tracking the progress of tasks. It provides a clear, hierarchical view of tasks, allowing you to easily identify manage project timelines. icon: SquareChartGantt dependencies:

• https://dndkit.com/
• https://usehooks.com/
• https://date-fns.org/
• https://lodash.com/docs/latest#throttle
• https://lucide.dev/
• https://jotai.org/ installer: gantt

---

Features

• Resizable and draggable timeline items
• Markers to highlight important dates
• Today marker to highlight the current date
• Create marker trigger to create a new marker
• Grouping of features
• Multiple items per row for scenarios like hotel reservations, resource booking, etc.

Examples

Multiple items on one row

Perfect for hotel reservations, resource scheduling, or any scenario where multiple items share the same category but have different time periods.

<Preview path="gantt-lanes" />

Without a sidebar

<Preview path="gantt-no-sidebar" />

Read-only version

<Preview path="gantt-read-only" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║