Gantt

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.

dnd kit

useHooks

date-fns

Lodash Throttle

Lucide

Zustand

Installation

npx kibo-ui@latest add 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

Examples

Read-only version

Props

The Gantt chart is made up of the following subcomponents.

GanttProvider

The GanttProvider component is the root component of the Gantt chart. It contains the drag-and-drop context and provides the necessary context for the other components.

Prop	Type	Default
`range`	`Range`	-
`zoom`	`number`	-
`onAddItem`	`(date: Date) => void`	-
`children`	`ReactNode`	-
`className`	`string`	-

GanttCreateMarkerTrigger

The GanttCreateMarkerTrigger component is a button that triggers the creation of a new marker.

Prop	Type	Default
`onCreateMarker`	`(date: Date) => void`	-
`className`	`string`	-

GanttFeatureItem

The GanttFeatureItem component is a single feature in the Gantt chart.

Prop	Type	Default
`id`	`string`	-
`name`	`string`	-
`startAt`	`Date`	-
`endAt`	`Date`	-
`status`	`GanttStatus`	-
`onMove`	`(id: string, startDate: Date, endDate: Date \| null) => void`	-
`children`	`ReactNode`	-
`className`	`string`	-

GanttFeatureList

The GanttFeatureList component is a container for the features in the Gantt chart.

Prop	Type	Default
`className`	`string`	-
`children`	`ReactNode`	-

GanttFeatureListGroup

The GanttFeatureListGroup component is a container for a group of features in the Gantt chart.

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

GanttSidebar

The GanttSidebar component is a container for the sidebar in the Gantt chart.

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

GanttSidebarGroup

The GanttSidebarGroup component is a container for a group of items in the sidebar.

Prop	Type	Default
`children`	`ReactNode`	-
`name`	`string`	-
`className`	`string`	-

GanttSidebarItem

The GanttSidebarItem component is a single item in the sidebar.

Prop	Type	Default
`feature`	`GanttFeature`	-
`onSelectItem`	`(id: string) => void`	-
`className`	`string`	-

GanttTimeline

The GanttTimeline component is a container for the timeline in the Gantt chart.

Prop	Type	Default
`children`	`ReactNode`	-
`className`	`string`	-

GanttMarker

The GanttMarker component is a single marker in the Gantt chart.

Prop	Type	Default
`id`	`string`	-
`date`	`Date`	-
`label`	`string`	-

GanttHeader

The GanttHeader component is the header of the Gantt chart.

Prop	Type	Default
`className`	`string`	-