SVAR React Gantt Chart

Website • Getting Started • Live Demos

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

SVAR React Gantt gives you the baseline of project planning: an interactive timeline, a task grid, intuitive UI for task management, and backend bindings — typed end to end and ready for React 19 and Next.js.

Timeline

• Interactive drag-and-drop timeline
• Task and dependency visualization
• Hierarchical view of subtasks
• Task progress shown on taskbars
• Configurable time scale: hours, days, weeks, sprints or stages
• Flexible time units: hours and minutes
• Weekend and holiday highlighting
• Zooming with scroll
• The ability to drag tasks from a backlog

Grid

• Customizable grid columns
• Sorting tasks in the grid
• Reorder tasks in the grid
• Task filtering, including natural language search
• Custom HTML in grid cells
• In-cell editing in the grid

Task interaction

• Customizable task edit form
• Toolbar and context menu
• Tooltips for taskbars and links
• Hotkeys for common actions

Data & performance

• Virtualization for large data sets
• Dynamic loading of sub-tasks
• RestDataProvider for REST backend binding
• Real-time updates from the server

UI & tooling

• Light and dark themes
• Localization
• Full TypeScript support
• AI tools for coding agents: MCP server, skills, and flat context files

🚀 PRO Edition

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

Scheduling & constraints

• Auto-scheduling: FS, SS, FF, SF, and lag
• Constraints (6 types)
• Critical path and deadlines
• Manual and inactive tasks

Calendars & resources

• Working time calendar (non-linear time scale), with individual calendars for tasks and resources
• Resource-driven scheduling
• Resource load chart and histogram
• Drag-and-drop resource assignment

Tracking

• Baselines, progress line, and S-curve
• Slack (float) visualization

Advanced task management

• Task grouping
• Rollups
• Split tasks
• Summary tasks automation
• Unscheduled tasks
• WBS codes support

Layout & data

• Sub-grid panel and placeholder row
• Undo/redo
• Vertical markers
• Export to PDF, PNG, Excel (including resources and assignments)
• MS Project import/export

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.