Getting Started

GanttCraft is a professional-grade, strictly typed, zero-dependency React Gantt library built for performance and enterprise use cases.

Installation

Install the library using your preferred package manager:

npm install ganttcraft
# or
pnpm add ganttcraft
# or
yarn add ganttcraft

Basic Usage

To get started, import the GanttChart component and provide it with an array of tasks.

import { GanttChart } from 'ganttcraft';
import type { GanttTask } from 'ganttcraft';

const tasks: GanttTask[] = [
  {
    id: 'task-1',
    name: 'Project Alpha',
    start: new Date('2026-05-01T00:00:00Z'),
    end: new Date('2026-05-15T00:00:00Z'),
    progress: 50,
  },
  {
    id: 'task-2',
    name: 'Design Phase',
    start: new Date('2026-05-01T00:00:00Z'),
    end: new Date('2026-05-05T00:00:00Z'),
    progress: 100,
    parentId: 'task-1', // Creates a hierarchy
  }
];

export default function MyGanttApp() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <GanttChart tasks={tasks} viewMode="day" />
    </div>
  );
}