Project management room with a large Gantt chart displayed on a wall screen

SVAR React Gantt: The Native React Gantt Chart That Actually Feels Like React

The Gray Cat
The Gray Cat

Project timelines are one of those things that look simple on paper and turn into a nightmare in code. You need horizontal bars that stretch across time, dependency arrows connecting tasks, drag-and-drop rescheduling, hierarchical grouping, and the whole thing has to stay responsive when your project manager dumps 500 tasks into it. Most React developers reaching for a Gantt chart component end up with a jQuery-era widget wrapped in a React shell, fighting ref forwarding and lifecycle mismatches. SVAR React Gantt takes a different approach: it is built natively for React from the ground up, ships with full TypeScript definitions, and handles the heavy lifting so you can focus on your actual application logic.

Why This Gantt Chart Stands Out

@xbs/react-gantt is not just another charting library with a timeline view bolted on. It is a purpose-built Gantt chart component with features that project management applications actually need:

  • Drag-and-drop scheduling with real-time visual feedback
  • Task dependencies (links between tasks) with rendered connection lines
  • Hierarchical task trees with expandable summary tasks and subtasks
  • Configurable time scales from hours all the way up to years, including custom sprint/stage units
  • In-cell editing directly in the grid columns
  • Task progress bars showing completion percentage
  • Three built-in themes: Material, Willow (light), and WillowDark (dark)
  • Zoom controls via scroll for navigating dense timelines
  • Performance optimized to handle 10,000+ tasks smoothly
  • Context menus, toolbars, tooltips, and hotkeys out of the box

The library is MIT-licensed at its core, with a commercial PRO edition available for advanced features like critical path analysis, baselines, and MS Project import/export.

Wiring Up the Timeline

Getting started is straightforward. Install the package with your preferred manager:

npm install @xbs/react-gantt

yarn add @xbs/react-gantt

You will also want to import the bundled CSS. The all.css file includes all theme styles, while style.css gives you the minimal base.

Your First Gantt Chart

The simplest setup requires just two things: an array of tasks and a scale configuration.

import { Gantt } from "@xbs/react-gantt";
import "@xbs/react-gantt/all.css";

interface Task {
  id: number;
  text: string;
  start: Date;
  duration: number;
  progress: number;
  parent: number;
  type: "task" | "summary" | "milestone";
  open?: boolean;
}

const tasks: Task[] = [
  {
    id: 1,
    text: "Website Redesign",
    start: new Date(2026, 2, 1),
    duration: 0,
    progress: 30,
    parent: 0,
    type: "summary",
    open: true,
  },
  {
    id: 2,
    text: "Design mockups",
    start: new Date(2026, 2, 3),
    duration: 5,
    progress: 80,
    parent: 1,
    type: "task",
  },
  {
    id: 3,
    text: "Frontend development",
    start: new Date(2026, 2, 10),
    duration: 10,
    progress: 20,
    parent: 1,
    type: "task",
  },
  {
    id: 4,
    text: "Launch",
    start: new Date(2026, 2, 22),
    duration: 0,
    progress: 0,
    parent: 1,
    type: "milestone",
  },
];

const scales = [
  { unit: "month", step: 1, format: "%F %Y" },
  { unit: "day", step: 1, format: "%j" },
];

export default function ProjectTimeline() {
  return <Gantt tasks={tasks} scales={scales} />;
}

That gives you a fully interactive Gantt chart with a task grid on the left and a timeline on the right. Tasks can be dragged to reschedule, resized to change duration, and clicked to select.

Connecting the Dots with Dependencies

Real projects have task dependencies. You cannot start QA testing before development is done. SVAR Gantt handles this with a links array:

import { Gantt } from "@xbs/react-gantt";
import "@xbs/react-gantt/all.css";

const tasks = [
  {
    id: 1,
    text: "Backend API",
    start: new Date(2026, 2, 1),
    duration: 7,
    progress: 50,
    parent: 0,
    type: "task" as const,
  },
  {
    id: 2,
    text: "Frontend integration",
    start: new Date(2026, 2, 10),
    duration: 5,
    progress: 0,
    parent: 0,
    type: "task" as const,
  },
  {
    id: 3,
    text: "QA testing",
    start: new Date(2026, 2, 17),
    duration: 3,
    progress: 0,
    parent: 0,
    type: "task" as const,
  },
];

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

export default function LinkedTimeline() {
  return <Gantt tasks={tasks} links={links} scales={[
    { unit: "month", step: 1, format: "%F %Y" },
    { unit: "day", step: 1, format: "%j" },
  ]} />;
}

Dependency arrows will render between the connected task bars, making the flow of work visible at a glance.

Bending the Chart to Your Will

Theming Without the Headache

SVAR Gantt ships with three themes as wrapper components. Switching between them is as clean as it gets:

import { Gantt } from "@xbs/react-gantt";
import { WillowDark } from "@xbs/react-gantt";
import "@xbs/react-gantt/all.css";

export default function DarkGantt() {
  return (
    <WillowDark>
      <Gantt tasks={tasks} scales={scales} />
    </WillowDark>
  );
}

Swap WillowDark for Willow or Material depending on the look you need. Since theming is pure CSS, you can override styles without wrestling a CSS-in-JS runtime.

Custom Grid Columns

The grid on the left side of the Gantt chart is fully configurable. You can define which columns appear, enable in-cell editing, and set flex widths:

import { Gantt } from "@xbs/react-gantt";
import "@xbs/react-gantt/all.css";

const columns = [
  { id: "text", header: "Task Name", flexgrow: 1, treetoggle: true },
  { id: "start", header: "Start Date", width: 120, align: "center" },
  { id: "duration", header: "Days", width: 60, align: "center" },
  { id: "progress", header: "Done %", width: 70, align: "center" },
];

export default function CustomGridGantt() {
  return (
    <Gantt
      tasks={tasks}
      scales={scales}
      columns={columns}
    />
  );
}

If you want a timeline-only view without the grid, pass columns={false} and the chart fills the entire width.

Zooming Into the Details

For timelines that span months or years, you will want different zoom levels. SVAR Gantt supports zoom via scroll out of the box, but you can also set up multiple scale configurations and switch between them programmatically:

const hourlyScales = [
  { unit: "day", step: 1, format: "%j %F" },
  { unit: "hour", step: 1, format: "%H:00" },
];

const weeklyScales = [
  { unit: "month", step: 1, format: "%F %Y" },
  { unit: "week", step: 1, format: "Week %w" },
];

const quarterlyScales = [
  { unit: "year", step: 1, format: "%Y" },
  { unit: "quarter", step: 1, format: "Q%q" },
];

Toggle between these scale arrays based on a zoom control in your UI, and the chart re-renders with the appropriate time resolution.

Adding Editing Superpowers

The Editor component provides a task editing form that slides out when a user double-clicks a task. Pair it with the Toolbar and ContextMenu for a complete project management interface:

import { Gantt, Editor, Toolbar, ContextMenu } from "@xbs/react-gantt";
import { Willow } from "@xbs/react-gantt";
import "@xbs/react-gantt/all.css";

export default function FullFeaturedGantt() {
  return (
    <Willow>
      <Toolbar />
      <Gantt tasks={tasks} scales={scales} links={links} />
      <Editor />
      <ContextMenu />
    </Willow>
  );
}

The toolbar gives users controls for adding tasks, indenting/outdenting in the hierarchy, and toggling views. The context menu appears on right-click with relevant actions for the clicked task. The editor provides a structured form for modifying task details, dates, and progress.

Scaling Up Without Slowing Down

One of the standout qualities of SVAR React Gantt is its performance profile. The official demos showcase 10,000 tasks rendering without perceptible lag, which puts it comfortably above most open-source alternatives in the performance department. For applications that need to visualize large project portfolios or complex multi-team schedules, that headroom matters.

The library also integrates with popular state management solutions. Whether your app uses Redux, Zustand, MobX, or Jotai, the Gantt component plays nicely with external stores. For backend connectivity, a RestDataProvider is available to sync changes with your server in real time.

Wrapping Up the Timeline

SVAR React Gantt fills a genuine gap in the React ecosystem: a native, performant, MIT-licensed Gantt chart that does not feel like a foreign widget duct-taped into your component tree. The combination of drag-and-drop scheduling, task dependencies, hierarchical views, and theme support covers the vast majority of project timeline use cases. For teams that need advanced features like critical path analysis or MS Project compatibility, the PRO edition is there. But the open-source core is remarkably capable on its own, and the fact that it handles 10,000+ tasks without flinching makes it a solid choice for applications where performance is non-negotiable.