If you've ever built scheduling or project management tools in React, you know how much time goes into getting timelines, tasks, and dependencies just right. With SVAR React Gantt 2.3, that entire experience just leveled up.
What Is SVAR React Gantt?
SVAR React Gantt is a complete timeline component for React applications. It handles task dependencies, drag-and-drop scheduling, zoom levels, customizable time scales - all the complex features you don't want to build from scratch. Think of it as the timeline interface behind tools like Asana or Monday.com, but as a React component you control.
Version 2.3 introduces the most requested features from the developer community. This release brings React 19 compatibility, official TypeScript support, and makes the package available on GitHub under GPLv3.
But more importantly, it adds greater flexibility to create customizable timelines adjusted to your project requirements.
You can install the latest version of SVAR React Gantt via npm:
npm install @svar-ui/react-gantt
The example below shows how to create a simple chart with one summary task containing a subtask, plus two separate tasks linked by a dependency:
import { Gantt } from "@svar-ui/react-gantt";
export default function App() {
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",
},
{
id: 22,
text: "Task",
start: new Date(2024, 7, 11),
end: new Date(2024, 8, 12),
duration: 8,
progress: 0,
parent: 47,
type: "task",
},
{
id: 21,
text: "New Task 2",
start: new Date(2024, 7, 10),
end: new Date(2024, 8, 12),
duration: 3,
progress: 0,
type: "task",
lazy: false,
},
];
const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];
const scales = [
{ unit: "month", step: 1, format: "MMMM yyy" },
{ unit: "day", step: 1, format: "d" },
];
return <Gantt tasks={tasks} links={links} scales={scales} />;
}
Let's look closer at what's new and why this release makes SVAR React Gantt one of the most capable open-source Gantt components for modern React apps.
Full React 19 + TypeScript Support
The foundation of v2.3 is compatibility with React 19, ensuring seamless integration with the latest concurrent rendering and performance improvements.
It also ships with TypeScript definitions, so you get proper type safety, and fewer runtime surprises right in your IDE.
Time Precision Beyond Days
SVAR React Gantt v2.3 doesn't stop at day-level planning, it adds hour and minute precision through two new properties:
-
durationUnit– defines duration of a task in hours or days -
lengthUnit– defines the minimal unit for task bars (the task length) in a chart and can be set from minute, hour, day, week to month, quarter or year.
Why it matters:
Now you can visualize even the shortest tasks with precise start and end times - perfect for production lines, healthcare shifts, or logistics dashboards.
👉 See more in docs – durationUnit & lengthUnit
Custom Time Scales
Beyond fixed weeks or months, with registerScaleUnit helper you can define your own scale units to reflect how your team actually works. You're no longer limited to predefined timeframes and can fully adapt the timeline to your application requirements.
With the new autoScale option, you can decide whether the chart adapts automatically to your data or stays fixed - giving you full control over your timeline.
👉 See more in docs - Configuring time scale
A Smarter, More Interactive Task Grid
Managing a large number of tasks just got simpler. The upgraded task grid introduces:
- Multi-column sorting
- In-cell editing (text, date, dropdown, or custom editors)
- Custom HTML rendering in cells
- Header menu to show or hide columns on the fly
No need to open task edit form for every change - edit tasks inline and keep your workflow fast and fluid.
👉 See more in docs - How to configure task grid
Configurable Task Editor
The task editor has been refactored into a standalone, fully customizable component based on SVAR React Editor. This gives you more freedom to:
- Choose between sidebar or modal layouts
- Add field-level validation
- Set up auto-save or manual-save modes
This separation makes it easier to customize the form or reuse it across different project views.
👉 See more in docs - How to configure task editor
Keyboard Shortcuts
End users can now navigate Gantt charts faster with hotkeys for common actions: copy, cut, paste, delete, open editor, and navigate through grid rows. This small change adds huge productivity gains during long planning sessions.
👉 See more in docs - Hotkeys support
UX Enhancements
SVAR React Gantt v2.3 introduces several polish updates:
- Fullscreen mode for clean presentations
- Resizable grid and chart areas with new expand/collapse control
- Built-in localization support
- Customizable tooltips on hover for task details
All these updates make the component feel smoother, more responsive, and ready for enterprise use.
Summing Up
SVAR React Gantt v2.3 combines modern React architecture with fine-grained scheduling and deep customization in one open-source package. Whether you're building a project planner, workforce scheduler, or resource management dashboard, this release gives you the tools to build faster and smarter.
Explore SVAR React Gantt v2.3:
🛠️ GitHub Repository
📚 Documentation
✨ Live Demos
💬 Have you used SVAR React Gantt or another timeline library in your React projects? Which features matter most to you in a Gantt component? Share your thoughts in the comments!
Top comments (0)