SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 
Latest update: v2.8

React Gantt Chart

Project scheduling & resource planning

SVAR React Gantt is a high-performance Gantt chart component for interactive timelines, task and dependency management. Built in React with full TypeScript support for easy integration and customization.

Also available for:
Also available for:

Why Choose SVAR React Gantt?

Written natively in React

SVAR React Gantt is a pure React component with no JavaScript wrappers, so it fits naturally into Vite, Next.js, and any React setup. It helps you visualize tasks and dependencies on an interactive timeline, and lets users adjust dates, durations, and links with simple drag-and-drop. 
import { Gantt, Willow } from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";


export default function App() {


  const tasks = [
    { id: 1, text: "Project planning",  type: "summary", open: true },
    { id: 2, text: "Marketing analysis", start: new Date(2026, 3, 2), duration: 3,  parent: 1 },
    { id: 3, text: "Discussions", start: new Date(2026, 3, 5), duration: 2,  parent: 1 }
  ];


  const links = [
    { id: 1, source: 2, target: 3, type: "e2s" }
  ];


  return (
    <Willow>
      <Gantt tasks={tasks} links={links} />
    </Willow>
  );
}

Customizable timeline & grid

Easily configure time scales, task bars, grid columns, tooltips, templates, and edit forms to match your application needs. With task sorting and filtering, SVAR React Gantt offers a flexible solution for project scheduling and planning workflows.
SVAR picture

Zooming & usability

Timeline zooming helps users switch between high-level roadmaps and detailed schedules. Keyboard shortcuts, tooltips, context menu, in-cell editing, and edit form make complex plans easier to manage and navigate.
SVAR picture

Handling thousands of tasks

Optimized rendering with virtualization and dynamic loading makes it easy to work with large datasets. This high-performance React Gantt chart stays fast even with thousands of tasks.


See the demo with 10 000 tasks
SVAR picture

PRO for resource planning & auto-scheduling

Start simple with the free, MIT-licensed core of SVAR React Gantt and upgrade to PRO for advanced auto-scheduling, critical path, constraints, calendars, baselines, resource planning, and more.


Explore PRO features
SVAR picture
icon

360K+

monthly downloads NPM

icon

MIT

licensed core

icon

25+

real life Projects

Try SVAR React Gantt

Try SVAR React Gantt with PRO features, including markers, split tasks, critical path and auto-scheduling. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Open Fullscreen Demo

Developer-First Architecture

> A production-ready Gantt Chart built specifically for modern React applications _

Flexible API & Customization

Customize timelines, task bars, and forms with a rich React API. Use CSS to adjust style.

Backend-Agnostic & REST API Ready

Use it as a Gantt chart for React app with REST API integration or connect to any backend stack.

Next.js & SSR Support

Compatible with Next.js 14+ and modern React environments, including SSR setups.

TypeScript & Scalable Integration

Full TypeScript support for safe and scalable integration

State Management Integration

Integrates smoothly with centralized state management solutions:

iconiconiconiconicon

Dynamic Loading & Virtualization

With performance optimizations, Gantt is ideal for deep hierarchies and thousands of tasks.

AI-Assisted Development

Structured API reference and MCP server for AI-assisted coding workflows.

Read the AI setup guide Connect the MCP server
Star on GitHub

SVAR Gantt PRO for Advanced Scheduling & Planning

The PRO Edition adds enterprise-grade scheduling logic and resource planning for teams managing complex projects where accuracy, visual clarity and planning control matter.

Pricing & Details Get Trial

pro

React Gantt automatic scheduling with dependencies

Auto-scheduling & critical path

React Gantt PRO schedules tasks automatically with all four dependency types (FS, SS, FF, SF). Dates, slack, and the critical path update when linked tasks change. You can also lock committed work as manual, or set cancelled tasks as inactive.

pro

React Gantt chart with task constraints and deadlines

Constraints & deadlines

Plan around delivery windows with six constraint types, like “start no earlier than” or “must finish on”. When a date can't be met, the conflict list explains why and offers one-click fixes. Deadline flags turn into warnings when a task runs late.

pro

React Gantt for resource planning and workload management

Resource planning & workload

You can assign people to tasks and see each person's workload in a resource load chart. The supported resource histogram highlights over-allocated people and periods, so you can rebalance before a bottleneck hits.

pro

React Gantt resource-driven scheduling with working-time calendars

Working-time calendars

Task durations respect working days, weekends, and holidays. With resource-driven scheduling, dates are also set in the calendars of assigned people, including days off and part-time schedules, so task bars show when the work can really be done.

pro

React Gantt export PDF, PNG, Excel and MS Project

Export & import

Export your Gantt charts to PDF, PNG, Excel, and MS Project formats. Import existing MS Project files for seamless migration. Perfect for reporting, presentations, and integrating with enterprise workflows.

pro

React Gantt baselines and progress tracking

Baselines & progress tracking

Baselines compare planned and actual dates on the chart. The progress line shows which tasks are ahead or behind on any date, and the S-curve plots planned, actual, and baseline progress over the timeline.

High Performance SVAR React Gantt PRO for project scheduling

Production-ready React Gantt

The PRO Edition turns SVAR React Gantt into a scheduling engine, not just a visual layer. In addition to the features above, it supports split tasks, rollups, task grouping, WBS codes, and more.

SVAR React Gantt is built for enterprise applications, with undo/redo support, a sub-grid panel for key details, and performance that remains smooth on projects with thousands of linked tasks.

Compare Open-Source vs PRO

Get Gantt PRO Trial

Fill out the form to receive a free 30-day trial of SVAR React Gantt PRO. Once we receive your request, we'll send you detailed instructions on how to access the trial version.

  • Fully functional trial
  • 30-day trial period
  • SVAR watermark

Read the full Trial License Agreement

Latest Updates

Version 2.8

October 7, 2026

What's new

Auto-scheduling: FS, SS, FF, SF (PRO)

Constraints & deadlines (PRO)

Resource-driven scheduling (PRO)

Real-time updates

Read More

Version 2.7

June 4, 2026

What's new

Resource planning (PRO)

Task grouping (PRO)

Individual calendars (PRO)

Import from Excel/CSV

Read More

Version 2.6

March 25, 2026

What's new

Filtering API

Integration with SVAR Filter

Rollups (PRO)

Slack visualization (PRO)

Read More

More on SVAR React Gantt

Read our blog
How To
18 min read

How to Build a Gantt Chart with React and SVAR Gantt

Olga Ishina

Olga Ishina
Guide
10 min read

Why SVAR React Gantt Is a Smart Choice for Project Management Apps

Marina Chernyuk

Marina Chernyuk
Comparison
15 min read

We Benchmarked Top React Gantt Chart Libraries So You Don't Have To

Maksim Kozhukh

Maksim Kozhukh
Guide
7 min read

Gantt Charts: When and Why to Use Them

Olga Tashlikovich

Olga Tashlikovich

Need help with integration?

Our team offers paid consulting and custom development services to help you make the most of SVAR React Gantt, from setup and feature customization to full web app development for your business needs.

Contact Us

Frequently Asked Questions

SVAR React Gantt is a React component for building interactive Gantt charts and project scheduling interfaces. It provides a visual timeline for managing tasks, dependencies, dates, and task relationships directly in React applications. The component supports drag-and-drop task editing, customizable layouts, and integration with application data and backend services.
SVAR React Gantt comes in two editions:
  • Open-source edition (MIT license) - Free for open-source and commercial use. It provides core Gantt functionality, including interactive timelines, hierarchical tasks, dependencies, drag-and-drop editing, customizable grids, sorting, filtering, zooming, and more.
  • PRO Edition (commercial licenses) - Adds advanced scheduling and project-management features, including auto-scheduling across four dependency types (FS, SS, FF, SF), critical path, constraints, deadlines, working-time calendars, baselines, resource planning, data export, and more.
Choose the open-source edition for core Gantt functionality, or PRO for automated scheduling, resource planning, progress tracking, and enterprise workflows. Compare editions and see prices →
You can easily integrate a React Gantt Chart library by installing it via npm:
  • Install the open-source version: npm install @svar-ui/react-gantt
  • Import into your React app
  • Initialize the Gantt with its main configuration options
  • Load task and dependency data
  • Configure and customize the Gantt chart to your needs
SVAR React Gantt component integrates seamlessly with Redux, REST APIs, and modern React workflows - perfect for dashboards, project planning tools, and agile management. Helpful resources: To try SVAR Gantt PRO with additional features, fill in this form for a free 30-day trial.
SVAR React Gantt is fully compatible with React 18 and 19.
Yes, TypeScript definitions have been available since version 2.3. You can fully leverage type safety when integrating SVAR Gantt into your React projects.
Yes. SVAR React Gantt works seamlessly with Next.js 14+ and supports server-side rendering. You can integrate it in both client and server components, following modern React and Next.js patterns. For a step-by-step setup, check the Next.js integration guide in our documentation.
SVAR provides a complete Go backend example along with a RestDataProvider helper for easier server-side integration. This allows you to load and update tasks dynamically, synchronize project data, and build collaborative workflows.
SVAR React Gantt component offers a strong balance of flexibility, performance, and ease of customization. It is a native React component, not a wrapper, so it fits naturally into Vite, Next.js, and other React setups and works with Redux, MobX, Zustand, and other state-management tools. The advanced scheduling engine of the PRO Edition supports dependency-based planning, critical path analysis, working-time calendars, and resource-aware scheduling. Virtualization and dynamic loading keep the component responsive with thousands of tasks, while zoomable timelines, keyboard shortcuts, localization, and full TypeScript definitions cover the everyday needs of building a scheduling UI. SVAR React Gantt suits dashboards, sprint planning, milestone tracking, and agile workflows. It connects to any backend through RestDataProvider or a custom API, making it easier to embed project scheduling into modern React applications.

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github