mantine-gantt

A gantt chart component for mantine

Installation

yarn add mantine-gantt

Usage

Task Name
Start
End
Project Planning
Feb 1, 2026
Feb 5, 2026
Requirements Analysis
Feb 3, 2026
Feb 9, 2026
UI/UX Design
Feb 8, 2026
Feb 17, 2026
Database Schema Design
Feb 10, 2026
Feb 14, 2026
API Development
Feb 15, 2026
Feb 28, 2026
Frontend Development
Feb 18, 2026
Mar 7, 2026
Integration Testing
Mar 5, 2026
Mar 11, 2026
User Acceptance Testing
Mar 12, 2026
Mar 16, 2026
Documentation
Feb 20, 2026
Mar 11, 2026
Deployment & Launch
Mar 17, 2026
Mar 19, 2026
January 2026
February 2026
March 2026
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Project Planning
Requirements Analysis
UI/UX Design
Database Schema Design
API Development
Frontend Development
Integration Testing
User Acceptance Testing
Documentation
Deployment & Launch
import { Gantt, type GanttTask } from 'mantine-gantt';

const mockTasks: GanttTask[] =  [
  {
    id: '1',
    label: 'Project Planning',
    startDate: '2026-02-01',
    duration: 5,
    progress: 100,
    dependencies: [],
  },
  {
    id: '2',
    label: 'Requirements Analysis',
    startDate: '2026-02-03',
    duration: 7,
    progress: 80,
    dependencies: ['1'],
  },
  {
    id: '3',
    label: 'UI/UX Design',
    startDate: '2026-02-08',
    duration: 10,
    progress: 60,
    dependencies: ['2'],
    color: 'violet',
  },
  {
    id: '4',
    label: 'Database Schema Design',
    startDate: '2026-02-10',
    duration: 5,
    progress: 40,
    dependencies: ['2'],
    color: 'teal',
  },
  {
    id: '5',
    label: 'API Development',
    startDate: '2026-02-15',
    duration: 14,
    progress: 20,
    dependencies: ['4'],
    color: 'orange',
  },
  {
    id: '6',
    label: 'Frontend Development',
    startDate: '2026-02-18',
    duration: 18,
    progress: 10,
    dependencies: ['3'],
  },
  {
    id: '7',
    label: 'Integration Testing',
    startDate: '2026-03-05',
    duration: 7,
    progress: 0,
    dependencies: ['5', '6'],
    color: 'red',
  },
  {
    id: '8',
    label: 'User Acceptance Testing',
    startDate: '2026-03-12',
    duration: 5,
    progress: 0,
    dependencies: ['7'],
    color: 'pink',
  },
  {
    id: '9',
    label: 'Documentation',
    startDate: '2026-02-20',
    duration: 20,
    progress: 15,
    dependencies: ['2'],
    color: 'gray',
  },
  {
    id: '10',
    label: 'Deployment & Launch',
    startDate: '2026-03-17',
    duration: 3,
    progress: 0,
    dependencies: ['8'],
    color: 'green',
  },
];

function Demo() {
  return <Gantt tasks={mockTasks} taskListWidth={400} />;
}