Shadcn Gantt

Browse 7 production-ready shadcn gantt components built on a headless-first ReUI primitive. Covers a resizable task tree, day through year scales, zoom, drag and resize scheduling with live validation, summary rollups, and a settings-driven feature tour - all composable with shadcn Button, Checkbox, Context Menu, and Tooltip.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Project plans where a tree of phases and tasks owns bars dragged and resized along a time axis
Roadmaps, status reports and team capacity views read anywhere from a single day to a whole year
Delivery tracked against a frozen plan, or work chained by dependency arrows and milestone diamonds

When not to use

A finished planner page with an edit dialog, dispatch rows and rules checked on drop: use the Gantt blocks
A quarter of sales deals grouped by account, beside board, table and calendar views: use the CRM blocks
A list of dated steps or updates read in order, with no bars to drag or resize: use the Timeline component

Agent notes

Replace buildBars, which dates its sample bars from the start of the current week, with your own records
Every example seeds bars through defaultEvents alone; pass events with onEventsChange to keep edits in your store

Third-party API docs

date-fns v4: docs
date-fns time zones v1: API reference, docs
Base UI v1: API reference, docs, llms.txt, through the Base UI twin
Radix UI v1: docs, through the Radix UI twin

Markdownhttps://web.dev.reui.io/components/gantt.md

MCPget_component("gantt")

Installnpx shadcn@latest add @reui/gantt

Full index for agents:llms.txtReUI MCP setup

Shadcn Gantt: Project Timelines with Tree and Scales for React

ReUI Gantt is a custom shadcn component with a headless-first architecture: a subscribable store owns the scale, date window, selection, and interactions, while GanttView renders split resizable tree and timeline panes with synced scrolling. Bars are plain data you can wire to any backend.

The primitive ships with day, week, month, quarter, and year scales, zoom with a floating control, infinite scrolling, summary rollups on parent rows, per-bar progress, edge resize and drag scheduling with live validation, and off-screen indicators that scroll to hidden bars.

The sections below cover what ReUI Gantt provides, why teams adopt it for project and resource planning, and how it composes with Checkbox, Context Menu, Tooltip, and other shadcn primitives.

What is Shadcn Gantt?

ReUI Gantt is a custom project-timeline component for React, not part of the base shadcn/ui library. It follows a headless-first design: Gantt provides the store and context, GanttNav renders Today, a scale switcher, prev/next and the period title, and GanttView renders the split tree and timeline body. The tree panel supports extra columns, a pinned name column, and a resizable splitter.

Bars are plain objects ({ id, title, start, end, color, progress, resourceId }) attached to tree rows by resourceId, handed in as controlled or uncontrolled state. Every mutation flows through an external CRUD contract (onEventsChange, onEventUpdate, canDropEvent), so persisting to a REST API, GraphQL mutation, or Next.js Server Action is a one-liner.

Why Use Shadcn Gantt?

Gantt charts appear in project management tools, resource planners, release trackers, and agency capacity boards. Most React gantt libraries are heavyweight, canvas-based, and hard to restyle; ReUI Gantt is copy-and-own DOM source styled with your Tailwind tokens, so the chart matches the rest of your shadcn/ui app out of the box.

The interaction engine validates gestures live (canDropEvent) and gates commits (onEventUpdate with a source discriminator), which makes business rules such as locked release gates, one-bar-per-task policies, and no-overlap rows straightforward. Pair it with Shadcn Data Grid for backlog views and Shadcn Kanban for status boards.

Shadcn Gantt Features

Split Tree and Timeline Panes. A resizable splitter divides the multi-column task tree from the timeline. Vertical scrolling stays perfectly synced, the name column stays pinned, and groups collapse and expand.
Day Through Year Scales with Zoom. Five scales with a grouped two-row header, a floating zoom control with configurable bounds, and infinite scrolling that extends the range as you approach an edge.
Drag Scheduling with Live Validation. Bars resize from either edge and move along the time axis with snapping; canDropEvent paints invalid ghosts live and onEventUpdate is the final commit gate, with drag-create available on empty tracks.
Progress and Summary Rollups. Bars render a subtle progress fill from a 0 to 100 value, and parent rows show envelope summary strips with duration-weighted progress; the rollup math is overridable.
Tree Columns and Row Selection. Add typed columns (due dates, assignees, priorities) after the built-in name column, drop a columns menu into the header slot, and select leaf rows with built-in checkboxes.
Off-Screen Indicators. Edge chips point to bars scrolled out of view and scroll the timeline to them on click, so long timelines stay navigable.
Headless State, Composable UI. useGanttState can be hoisted and adopted by multiple surfaces, an apiRef exposes an imperative API, and renderers exist for bars, tree labels, context menus, drag previews, hints, and summaries.

ReUI Gantt: In-House Custom Shadcn Component

ReUI Gantt is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It follows the same copy-and-own installation model as every shadcn/ui component: the source lands directly in your repository as a set of composable files (root, view, nav, bar, interaction engine, recurrence, i18n, types), and you own, extend, and style it with your Tailwind CSS tokens.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling - only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Pair the gantt with Shadcn Data Grid for a sortable backlog view of the same tasks, and with Shadcn Event Calendar when plans are date-driven rather than resource-driven.

Use Shadcn Context Menu for bar and row actions, Shadcn Avatar in custom tree columns for assignees, and Shadcn Badge for status and priority chips inside custom bar renderers.

Wrap the gantt nav in its toolbar slot with Shadcn Button actions, and use Shadcn Sonner for async feedback when schedule changes are persisted to a backend.

Gantt Blocks in ReUI Pro

The free examples above pair with 4 production ready gantt blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Gantt (4 blocks)Gantt chart blocks with task trees, timeline bars, split panes, and inline editing for roadmaps.

Browse all Application blocks

Frequently Asked Questions

How do I persist bar changes after a drag or resize?

Handle onEventUpdate: it receives the proposed start, end, and the gesture source (drag, resize-start, resize-end, or api). Return false to revert, return an object to adjust, or accept and call your backend. Controlled usage via events plus onEventsChange keeps the gantt in sync with server state.

Can bars move between rows?

No, and that is by design: gantt bars move along the time axis only. Rows represent tasks or resources in the tree; reassigning a bar to another row is a data operation you perform through your own UI, for example a context menu action.

How do parent rows show progress without bars of their own?

Summary bars render an envelope strip across each parent row spanning its descendant bars, with duration-weighted mean progress. Override the math with getSummaryProgress or the rendering with renderSummary.

Can I add custom columns to the task tree?

Yes. Pass columns with an id, title, width, and render callback that receives the row context. The tree panel scrolls horizontally when columns outgrow it while the name column stays pinned, and the columnsMenu slot is the intended home for an add or remove columns dropdown.

How do I add a right-click menu to bars?

Return shadcn Context Menu items from renderEventMenu. The primitive wraps every bar in a Context Menu and renders your items as its content; drive actions through the gantt api or your own state.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.