Gantt React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Gantt is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import Gantt from @/components/ui/gantt.

import { useState } from "react"
import { Gantt, type GanttTask } from "@/components/ui/gantt"
// also exported: computeSummary(tasks) (span and weighted progress of every parent),
// findDependencyViolations(tasks) (tasks starting before a predecessor ends), topoSortTasks(tasks) (predecessors first)

const START: GanttTask[] = [
  { id: "analysis", name: "Analysis", start: new Date(2026, 8, 22), end: new Date(2026, 9, 3) },
  {
    id: "workshop",
    name: "Requirements workshop",
    parentId: "analysis",
    start: new Date(2026, 8, 22),
    end: new Date(2026, 8, 25),
    progress: 1,
    assignee: { name: "Liam Walker" },
  },
  {
    id: "specs",
    name: "Specifications",
    parentId: "analysis",
    start: new Date(2026, 8, 28),
    end: new Date(2026, 9, 3),
    progress: 0.4,
    dependencies: ["workshop"],
  },
  { id: "go-live", name: "Go-live", start: new Date(2026, 10, 3), end: new Date(2026, 10, 3), milestone: true, dependencies: ["specs"] },
]

export function ProjectPlan() {
  const [tasks, setTasks] = useState(START)
  return (
    <Gantt
      title="Acme CRM rollout"
      tasks={tasks}
      locale="en-US"
      onTaskChange={(task, change) =>
        setTasks((list) => list.map((t) => (t.id === task.id ? { ...t, ...change } : t)))
      }
      labels={{ fit: "Fit all", week: (n) => `Week ${n}` }}
    />
  )
}

Props

• tasks*
  GanttTask[]

  { id, name, start, end (inclusive), progress? 0 to 1, parentId?, dependencies? (finish to start), milestone?, assignee? { name, avatar? }, tone?, color?, status? { label, tone? }, readOnly? }. Order is display order within each parent; a task with children is a group whose span and progress are computed.

• titledefault ""
  ReactNode

  A heading at the start of the toolbar, like the project's name.

• defaultZoomdefault "week"
  "day" | "week" | "month"

  Starting zoom while uncontrolled: day is 40px a day with day headers, week 20px a day with week numbers, month 6px a day with month names. Pair zoom with onZoomChange to control it.

• zoom
  "day" | "week" | "month"

  The controlled zoom; the toolbar's segmented control and Fit call onZoomChange.

• onZoomChange
  (zoom: GanttZoom) => void

  Fires when the zoom control, Fit or the API changes the zoom.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The default bar color; a task's own tone or color wins.

• colordefault ""
  string

  Any CSS color for the bars; replaces the tone. Leave empty to use the tone.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg"

  Corner radius of the panel: 0 / 12 / 16 / 24px.

• rowHeightdefault 44
  number

  Row height in px. Bars stay 28px tall and keep a 44px touch target.

• listWidthdefault 320
  number

  Width of the task list in px (at least 200). People can drag its edge, or focus the edge and use the arrow keys. From 512 to 1023px the list keeps only the names, at most 220px (and 40% of the width).

• maxHeightdefault 520
  number

  Height in px after which the body scrolls, with sticky headers and a sticky task list. 0 grows with the rows.

• showListdefault true
  boolean

  The task list beside the timeline. Off, group bars carry their names.

• toolbardefault true
  boolean

  The row with the title, the zoom, Today and Fit.

• listColumnsdefault "["assignee", "start", "progress"]"
  ("assignee" | "start" | "end" | "duration" | "progress" | "status")[]

  Columns after the name, shown from 1024px of width.

• editabledefault true
  boolean

  Bars move and resize by drag, by Alt+arrows and from the details. Off, the details only show the task.

• progressEditabledefault false
  boolean

  A handle under each bar to drag its progress, in steps of 5%.

• snapdefault "day"
  "day" | "week"

  What a drag, a resize and Alt+arrows snap to.

• showDependenciesdefault true
  boolean

  Arrows from each predecessor's end to its task's start; dashed red when the task starts too early.

• showTodaydefault true
  boolean

  Today's line across the timeline, its day in the header and the Today button.

• showWeekendsdefault true
  boolean

  Shades the locale's weekend days in the day and week zooms.

• loadingdefault false
  boolean

  Skeleton rows in place of the tasks.

• skeletonCountdefault 6
  number

  How many skeleton rows show while loading.

• responsivedefault true
  boolean

  Task details open in a bottom sheet below 768px instead of a popover.

• localedefault ""
  string

  Dates, week numbers, month and weekday names, the first day of the week and the weekend. Empty follows the app.

• onTaskChange
  (task: GanttTask, change: GanttTaskChange) => (void | false | Promise<unknown>)

  A move, a resize, a progress drag or a details save, with { start, end, progress? }. The bar keeps the new place optimistically; return false or reject to spring it back. Dependents are not shifted for you.

• onTaskClick
  (task: GanttTask) => void

  Replaces the built-in details popover and sheet.

• columnWidthdefault "{ day: 40, week: 20, month: 6 }"
  Partial<Record<GanttZoom, number>>

  Pixels per day for each zoom.

• range
  { start: Date; end: Date }

  The visible dates; it grows to include every task. Default: the tasks' span plus 7 days on each side.

• weekStartsOndefault -1
  0 | 1 | 2 | 3 | 4 | 5 | 6 | -1

  First day of a week column and of the date pickers: 0 Sunday, 1 Monday ... 6 Saturday; -1 follows the locale (Monday in en-GB, Sunday in en-US).

• groupsExpanded
  string[]

  Controlled ids of the open groups; pair it with onGroupsExpandedChange.

• defaultGroupsExpanded
  string[]

  Open groups while uncontrolled. Default: every group.

• onGroupsExpandedChange
  (ids: string[]) => void

  Fires when a group folds or unfolds.

• emptyState
  ReactNode

  Shown when there are no tasks. Default: an EmptyState with labels.empty ("No tasks yet").

• now
  Date | number

  Where today's line sits. Default: the current time, updated every minute.

• setApi
  (api: GanttApi) => void

  Receives { scrollToToday(), scrollToTask(id), setZoom(zoom), fit() } after mount.

• toolbarActions
  ReactNode

  Extra buttons at the end of the toolbar.

• labels
  Partial<GanttLabels>

  Every string, English by default (DEFAULT_GANTT_LABELS): task, assignee, start, end, date, duration(days, formatted), durationColumn, progress, status, today, fit, zoom, zoomDay, zoomWeek, zoomMonth, week(n), range(start, end), project(range), completed(percent), assignedTo(name), moved(task, range), resized(task, range), progressChanged(task, percent), violation(task, predecessor), failed(task), milestone, group(count, formatted), details, save, cancel, close, expand, collapse, resizeList, timeline, noAssignee, empty, emptyDescription, loading.

• classNames
  Partial<Record<GanttSlot, string>>

  Extra classes for toolbar, title, body, listHeader, listRow, timelineHeader, grid, row, bar, barProgress, barLabel, milestone, summary, dependencies, today, details, mobile and mobileRow.

Parts

FAQ

More React data display components