SVAR React Gantt is a customizable, high-performance Gantt chart component written in React. It offers a developer-friendly API, full TypeScript support, React 19 compatibility, and flexible CSS styling.

The component supports multiple task types, dependencies, custom time scales, and light/dark themes. It is designed to handle thousands of tasks efficiently (see demo with 10k tasks).

Interactive, drag-and-drop interface allows users to add, edit, and organize tasks and dependencies directly on the timeline or through a simple task edit form.

✨ Core Features

• Task and dependency visualization
• Interactive timeline with drag-and-drop
• Customizable task edit form
• Task progress shown on taskbars
• Hierarchical view of subtasks
• Configurable time scale (hours, days, weeks, sprints or stages)
• Flexible time units: support for hours and minutes
• Customizable grid columns
• Sorting tasks in grid
• Task filtering
• Toolbar and context menu
• Tooltips for taskbars
• Zooming with scroll
• Hotkey support for common actions
• Virtualization for large data sets
• Localization
• Full TypeScript support

🚀 PRO Edition

In addition to free, open-source core, SVAR React Gantt offers the PRO edition with additional features and automation logic:

• Work-time calendar (non-linear calendar)
• Calendars for individual tasks or resources
• Critical path
• Slack (float) visualization
• Baselines
• Resource planning
• Resource workload visualization
• Task grouping
• Auto-scheduling (forward mode and Finish-to-Start dependencies)
• Summary task automation
• Unscheduled tasks
• Rollups
• Split tasks
• Vertical markers
• WBS codes support
• Undo/redo
• Export to PNG, PDF, Excel, and MS Project (export/import)

Visit the pricing page for full feature comparison and free trial.

Check out the demos to see all SVAR React Gantt features in action.

:hammer_and_wrench: How to Use

To start using SVAR React Gantt, simply import the package and include the desired component in your React file:

import { Gantt } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

export default function MyComponent() {
  const tasks = [
    {
      id: 20,
      text: 'New Task',
      start: new Date(2024, 5, 11),
      end: new Date(2024, 6, 12),
      duration: 1,
      progress: 2,
      type: 'task',
      lazy: false,
    },
    {
      id: 47,
      text: '[1] Master project',
      start: new Date(2024, 5, 12),
      end: new Date(2024, 7, 12),
      duration: 8,
      progress: 0,
      parent: 0,
      type: 'summary',
    },
  ];

  return <Gantt tasks={tasks} />;
}

See the getting started guide to learn how to configure data sources, customize columns, and enable editing.

You'll also find integration guides for:

• Next.js demo & guide
• State management: Redux, Zustand, MobX, XState, Jotai

⭐ Show Your Support

If SVAR React Gantt helps your project, consider giving us a star! It helps other developers discover this library and motivates us to keep improving.

:speech_balloon: Need Help?

Post an Issue or use our community forum.