mantine-gantt

A gantt chart component for mantine

Source

View source code

Package

Docs

Built by

Jakub Wojdziak (@WojakGra)

License

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} />;
}