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.
Issues
Duration
Cloud Infrastructure
Cloud Asset Management
2 months
Real-time Project Analytics
2 months
Global CDN Integration
about 2 months
Blockchain-based Asset Licensing
2 months
Collaboration Tools
Collaborative Editing
6 months
Real-time Video Chat
4 months
Version Control System
2 months
Multi-User Permissions
2 months
Collaborative Storyboarding
2 months
Real-time Language Translation
2 months
Core AI Features
AI Scene Analysis
7 months
AI-Powered Color Grading
5 months
AI Voice-to-Text Subtitles
3 months
AI-Assisted Video Transitions
2 months
AI Content-Aware Fill
2 months
AI-Powered Audio Enhancement
2 months
AI Scene Recommendations
2 months
AI-Driven Video Compression
about 2 months
AI Object Tracking
2 months
AI-Powered Video Summarization
2 months
2024
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2025
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2026
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
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
Without a sidebar
2024
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2025
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2026
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Read-only version
Issues
Duration
Cloud Infrastructure
Cloud Asset Management
2 months
Real-time Project Analytics
2 months
Global CDN Integration
about 2 months
Blockchain-based Asset Licensing
2 months
Collaboration Tools
Collaborative Editing
6 months
Real-time Video Chat
4 months
Version Control System
2 months
Multi-User Permissions
2 months
Collaborative Storyboarding
2 months
Real-time Language Translation
2 months
Core AI Features
AI Scene Analysis
7 months
AI-Powered Color Grading
5 months
AI Voice-to-Text Subtitles
3 months
AI-Assisted Video Transitions
2 months
AI Content-Aware Fill
2 months
AI-Powered Audio Enhancement
2 months
AI Scene Recommendations
2 months
AI-Driven Video Compression
about 2 months
AI Object Tracking
2 months
AI-Powered Video Summarization
2 months
2024
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2025
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2026
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Cloud Asset Management
Real-time Project Analytics
Global CDN Integration
Blockchain-based Asset Licensing
Collaborative Editing
Real-time Video Chat
Version Control System
Multi-User Permissions
Collaborative Storyboarding
Real-time Language Translation
AI Scene Analysis
AI-Powered Color Grading
AI Voice-to-Text Subtitles
AI-Assisted Video Transitions
AI Content-Aware Fill
AI-Powered Audio Enhancement
AI Scene Recommendations
AI-Driven Video Compression
AI Object Tracking
AI-Powered Video Summarization
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 |
|---|---|---|
className? | string | - |
children | ReactNode | - |
onAddItem? | ((date: Date) => void) | - |
zoom? | number | - |
range? | Range | - |
GanttCreateMarkerTrigger
The GanttCreateMarkerTrigger component is a button that triggers the creation of a new marker.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
onCreateMarker | (date: Date) => void | - |
GanttFeatureItem
The GanttFeatureItem component is a single feature in the Gantt chart.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
children? | ReactNode | - |
onMove? | ((id: string, startDate: Date, endDate: Date | null) => void) | - |
status | GanttStatus | - |
endAt | Date | - |
startAt | Date | - |
name | string | - |
id | string | - |
GanttFeatureList
The GanttFeatureList component is a container for the features in the Gantt chart.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
className? | string | - |
GanttFeatureListGroup
The GanttFeatureListGroup component is a container for a group of features in the Gantt chart.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
children | ReactNode | - |
GanttSidebar
The GanttSidebar component is a container for the sidebar in the Gantt chart.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
children | ReactNode | - |
GanttSidebarGroup
The GanttSidebarGroup component is a container for a group of items in the sidebar.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
name | string | - |
children | ReactNode | - |
GanttSidebarItem
The GanttSidebarItem component is a single item in the sidebar.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
onSelectItem? | ((id: string) => void) | - |
feature | GanttFeature | - |
GanttTimeline
The GanttTimeline component is a container for the timeline in the Gantt chart.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
children | ReactNode | - |
GanttMarker
The GanttMarker component is a single marker in the Gantt chart.
| Prop | Type | Default |
|---|---|---|
label | string | - |
date | Date | - |
id | string | - |
GanttHeader
The GanttHeader component is the header of the Gantt chart.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
Calendar
The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.
Kanban
A kanban board is a visual tool that helps you manage and visualize your work. It is a board with columns, and each column represents a status, e.g. "Backlog", "In Progress", "Done".