shadcn.io is an independent project built on shadcn/ui

Free

Gantt chart

Project schedules with phases, progress, milestones and dependency arrows. The height follows the number of rows, and a long plan can scroll sideways on a phone instead of shrinking.

TanStack Charts

PreviewCode

Installation

The command adds the example above to components/charts/ and, the first time, the chart kit to components/ui/charts/. Both are source files in your project from then on: read them, change them, delete what you don't use.

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

Each task needs an id, a name, a start and an end, with dates as Date objects, ISO strings or timestamps. progress runs from 0 to 1, and dependsOn lists the ids a task waits for.

<script setup lang="ts">
import {
  ChartTooltip,
  GanttChart,
  GanttDependencies,
  GanttTasks,
  GanttXAxis,
  GanttYAxis,
} from "@/components/ui/charts";

const tasks = [
  {
    id: "design",
    name: "Design",
    start: new Date(2026, 4, 4),
    end: new Date(2026, 4, 15),
    progress: 1,
  },
  {
    id: "build",
    name: "Build",
    start: new Date(2026, 4, 18),
    end: new Date(2026, 5, 12),
    progress: 0.4,
    dependsOn: ["design"],
  },
  {
    id: "launch",
    name: "Launch",
    start: new Date(2026, 5, 15),
    milestone: true,
    dependsOn: ["build"],
  },
];
</script>

<template>
  <GanttChart ariaLabel="Release plan, May to June" :data="tasks">
    <GanttTasks />
    <GanttDependencies />
    <GanttXAxis />
    <GanttYAxis />
    <ChartTooltip />
  </GanttChart>
</template>

Anatomy

Each part draws one layer, and a part you leave out isn't drawn: without GanttDependencies there are no arrows, and without GanttYAxis no task names.

<GanttChart :data="tasks" :min-width="560">
  <Grid />
  <GanttTasks />
  <GanttDependencies />
  <GanttToday :date="new Date(2026, 3, 14)" />
  <GanttXAxis />
  <GanttYAxis :width="150" />
  <ChartTooltip />
</GanttChart>

GanttChart: Takes the tasks as data and gives each one a row, rowHeight pixels tall.
Grid: Vertical guide lines at the date ticks.
GanttTasks: The task bars with their progress, the phase bars and the milestone diamonds.
GanttDependencies: An arrow from each task listed in dependsOn to the task that waits on it.
GanttToday: A dashed line on date, labeled under the rows.
GanttXAxis: Dates along the top, or along the bottom with position="bottom".
GanttYAxis: Task names in a gutter width pixels wide, phases in bold with their tasks indented.
ChartTooltip: Start, end, duration, progress and what the task waits on.

Phases and progress

Tasks that share a group are gathered under a phase row whose bar spans all of them. Phases appear in the order of their first task, and a phase's progress is its tasks' progress weighted by how long each one runs.

Each task bar fills to its progress over a lighter track. Pass :showProgress="false" to <GanttTasks> for solid bars.

Milestones and dependencies

Set milestone: true on a task, or leave out its end, and it becomes a diamond on its start date.

<GanttDependencies /> draws an arrow from the end of each task in dependsOn to the start of the task waiting on it. When a task starts before the one it waits on has ended, the arrow routes around the rows instead of cutting back through them. Hovering a task picks out its arrows and fades the rest.

PreviewCode

Colors per task

A task's color wins over the fill on <GanttTasks>, so a roadmap can color each bar by team. Fields the chart doesn't know about stay on the task and reach the tooltip's rows.

formatValue on <GanttXAxis> changes the date labels, here to month names, and numTicks sets roughly how many there are.

PreviewCode

Small screens

Set minWidth and the chart stops shrinking below that many pixels and scrolls sideways instead, so a six-month plan stays readable on a phone. The height doesn't depend on the width: it's the number of rows times rowHeight, plus the margins.

Customization

The kit is in your project, in components/ui/charts/: your framework's components over a shared core/. Change a default there and every chart picks it up.

class goes on the chart's container, so size and spacing are utility classes.

The tooltip lists each row's dates, duration, progress and dependencies. rows replaces that list and receives the task object itself, so any field you add to a task, like an owner or a team, can show up there. content replaces the whole panel.

On <GanttTasks>, barSize sets how much of its row a bar fills (0.56), radius rounds its corners and phaseFill colors the phase bars. <GanttDependencies> takes stroke and strokeWidth for the arrows.

<ChartTooltip
  :rows="(task) => [
    { color: String(task.color), label: 'Owner', value: String(task.owner) },
    {
      color: 'transparent',
      label: 'Done',
      value: `${Math.round(Number(task.progress ?? 0) * 100)}%`,
    },
  ]"
/>

Where a part renders content of its own, you pass it in. In Vue:

ChartTooltip: <template #content="{ point, index }">

Loading state

With status="loading" each row turns into a shimmering skeleton bar, with a pill where its name goes, and the pointer is ignored. Switch to "ready" and the schedule plays in from the first row.

The skeleton has as many rows as the chart, phases included, so the height doesn't jump. With no tasks yet, <GanttChartLoading /> draws six rows. Give it your rowHeight.

PreviewCode

Animation

Bars grow from their start date one row after another over animationDuration, 1100 ms by default. Progress fills follow a quarter of the way in, then the today line, the milestones and finally the arrows fade in.

Pass :animate="false" to draw the finished schedule straight away.

Theming

Every color in the kit is one of your theme's tokens or a mix of them, except --chart-positive, a fixed green. A preset or the .dark class restyles the chart, and overriding a token in your CSS changes it everywhere.

Bars use --chart-1 unless <GanttTasks> gets a fill or a task has its own color. Phase bars and arrows are --chart-foreground-muted, and the today line borrows --chart-date-pill-background.

Token	Default	Paints
`--chart-1`	your theme's	the first series
`--chart-foreground-muted`	`--muted-foreground` mixed toward `--background`	skeletons and faded marks
`--chart-date-pill-background`	`--primary`	the date pill on hover
`--chart-grid`	`--border`	grid lines
`--chart-label`	`--muted-foreground`	tick labels
`--chart-tooltip-background`	`--popover`	the tooltip panel

globals.css

:root {
  --chart-date-pill-background: var(--foreground);
  --chart-grid: var(--muted);
}

Accessibility

The chart is an image named by ariaLabel ("Gantt chart" by default). Name the project and its dates there, and say where the plan stands in ariaDescription.

A row focused from the keyboard dims the others and shows its tooltip, as on hover.

Tab: Moves focus to the chart and its first row.
Arrow Down: Moves to the next row, phases included. ArrowRight does the same.
Arrow Up: Moves to the previous row. ArrowLeft does the same.
Home: Jumps to the first row.
End: Jumps to the last row.

API reference

Vue takes the same props as React, in camelCase or kebab-case, with class for className. Render props are scoped slots (#content), and callbacks such as onHoverChange can be written as listeners (@hover-change).

GanttChart

PropType

datareadonly GanttTask[]

The tasks, top to bottom (grouped under their group's phase row when they have one).

rowHeight?number

Height of one row in px: the chart is as tall as its rows.

Default: 36

minWidth?number

Width in px below which the schedule stops shrinking and scrolls sideways instead, so a long plan stays readable on a phone.

margin?Partial<ChartMargin>

Space around the plot in px. The task labels' gutter is GanttYAxis' width, added to left.

Type: Partial<ChartMargin>

animate?boolean

Animate the bars in on mount: each grows from its start, row by row, then the dependencies fade in.

Default: true

animationDuration?number

Length of the entrance in milliseconds.

Default: 1100

ariaLabel?string

Accessible name of the chart.

Default: "Gantt chart"

ariaDescription?string

Longer accessible description of the chart.

class?string

Extra class name for the chart container.

style?CSSProperties

Inline styles for the chart container.

children?ReactNode

The chart's parts: GanttTasks, GanttDependencies, GanttToday, GanttXAxis, GanttYAxis, Grid and ChartTooltip.

status?ChartStatus

"loading" draws a shimmering skeleton shaped like the chart in place of its marks and ignores the pointer; switching to "ready" plays the chart's entrance.

Default: "ready"

loadingLabel?string

Centered label shown over the plot while status is "loading".

GanttTasks

PropType

fill?string

Colour of the bars and milestones. A task's own color wins.

Default: "var(--chart-1)"

barSize?number

Thickness of a task bar as a share of its row.

Default: 0.56

radius?number

Corner radius of the bars in px.

Default: 6

showProgress?boolean

Fill each bar with its progress in full colour over a lighter track. Off, the whole bar is full colour.

Default: true

phaseFill?string

Colour of the phase rows' summary bars.

Default: "var(--chart-foreground-muted)"

fadedOpacity?number

Opacity of the other rows while one is hovered.

Default: 0.3

GanttDependencies

PropType

stroke?string

Colour of the arrows. A hovered task's own arrows turn to the foreground colour; the others fade.

Default: "var(--chart-foreground-muted)"

strokeWidth?number

Width of the arrows in px.

Default: 1.25

GanttToday

PropType

dateGanttDate

The date the rule marks.

label?string

The label under the rule. Pass an empty string for none.

Default: "Today"

stroke?string

Colour of the rule and its label.

Default: "var(--chart-date-pill-background)"

GanttXAxis

PropType

numTicks?number

Target number of date ticks.

Default: 6

formatValue?(value: Date) => string

Formats a tick date into its label. Defaults to a short month and day such as "Apr 6".

Type: (value: Date) => string

position?"top" | "bottom"

Where the axis sits.

Type: "top" | "bottom"
Default: "top"

GanttYAxis

PropType

width?number

Width of the label gutter in px.

Default: 168

Grid

PropType

horizontal?boolean

Show horizontal grid lines.

Default: true

vertical?boolean

Show vertical grid lines.

Default: false

numTicksRows?number

Number of horizontal grid lines. Ignored when rowTickValues is set.

Default: 5

numTicksColumns?number

Number of vertical grid lines.

Default: 10

rowTickValues?number[]

Explicit y values for the horizontal grid lines. Overrides numTicksRows.

stroke?string

Color of the grid lines.

Default: "var(--chart-grid)"

loadingStroke?string

Grid color while the chart is loading. Falls back to stroke.

strokeOpacity?number

Opacity of the grid lines.

Default: 1

strokeWidth?number

Width of the grid lines in px.

Default: 1

strokeDasharray?string

Dash pattern of the grid lines.

Default: "4,4"

highlightRowValues?number[]

Y values of horizontal lines drawn with the highlight styling, for example a zero baseline.

highlightRowStroke?string

Color of the highlighted rows.

Default: "var(--chart-foreground-muted)"

highlightRowStrokeOpacity?number

Opacity of the highlighted rows.

Default: 1

highlightRowStrokeWidth?number

Width of the highlighted rows in px.

Default: 1

highlightRowStrokeDasharray?string

Dash pattern of the highlighted rows.

Default: "0"

fadeHorizontal?boolean

Fade the horizontal lines toward transparent at the left and right edges.

Default: true

fadeVertical?boolean

Fade the vertical lines toward transparent at the top and bottom edges.

Default: false

hideHorizontalEdgeLines?boolean

Drop the first and last horizontal line (kept when two or fewer remain).

Default: false

hideVerticalEdgeLines?boolean

Drop the first and last vertical line (kept when two or fewer remain).

Default: false

shimmer?boolean

While the chart is loading, sweep a bright band across the grid.

Default: false

shimmerStroke?string

Color of the shimmer band.

Default: "color-mix(in oklch, var(--bkm-foreground) 68%, transparent)"

shimmerSpeed?number

Speed multiplier of the shimmer sweep. 2 is twice as fast.

Default: 1

ChartTooltip

PropType

showDatePill?boolean

Show the date pill that rides along the bottom of the plot.

Default: true

showCrosshair?boolean

Show the vertical crosshair line. Bar charts leave it off unless this is true (the dots and the category pill mark the bar).

Default: true

showDots?boolean

Show a dot on every series at the hovered position.

Default: true

dotVariant?"dot" | "ring"

Dot style: a filled "dot" or a transparent "ring" square. Read by BarChart only.

Type: "dot" | "ring"
Default: "dot"

dotSize?number

Dot radius in px.

Default: 5

dotRadiusFraction?number

Corner radius of the "ring" variant as a fraction of its side (0 is square, 0.5 is a circle). Read by BarChart only.

Default: 0.25

dotScale?number

Multiplier applied to the dot or ring size. Read by BarChart and LiveLineChart.

Default: 1

dotStrokeWidth?number

Stroke width of the dots in px.

Default: 2

indicatorColor?string | ((point: Record<string, unknown>) => string)

Color of the crosshair. Only a string is applied; the function form that bklit-ui accepts is ignored and the default is used.

Type: string | ((point: Record<string, unknown>) => string)
Default: "var(--chart-crosshair)"

#content?slot: { point, index }

Replaces the default tooltip panel body. Receives the hovered data row and its index; with pinnable, also whether the panel is pinned and a dismiss that unpins it (for a close button in a pinned panel's detail).

pinnable?boolean

A click (or Enter, or Space) on the chart pins the tooltip where it is: the panel takes the pointer, so its content can grow into detail and hold controls, until another click, Escape or dismiss lets it go.

Default: false

rows?(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

Replaces the default rows (one per series) with your own list of { color, label, value }.

Type: (point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

dotColor?string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

Fill of the tooltip dots. A function receives the hovered row and the series config, and is called again each time the hovered row changes. Defaults to each series' color; a ProfitLossLine's dot takes the color of the hovered value's sign.

Type: string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

#default?slot

Extra content rendered below the rows in the default panel, for example marker details. Without it, a chart with ChartMarkers lists the markers on the hovered date there.

class?string

Extra class name for the tooltip panel.

springConfig?SpringConfig

Spring for the floating panel when matchCrosshair is on. Defaults to the chart's tooltip spring.

matchCrosshair?boolean

Make the floating panel follow the pointer with the same spring as the crosshair instead of damping.

Default: false

damping?number

Spring damping for the floating panel when matchCrosshair is off, on bklit's 0 to 100 scale: lower is bouncier, higher slower, 0 moves the panel instantly. The default, 20, is the snappy hover spring (stiffness 3600, damping 120); every other value is bklit's spring for it played six times faster.

Default: 20

indicatorDasharray?string

Dash pattern of the crosshair. Omit for a solid line.

indicatorFadeEdges?IndicatorFadeEdges

Vertical fade of the crosshair: both ends, the top, the bottom, or none (solid).

Default: "both"

indicatorFadeLength?number

Size of the crosshair's fade, as a percentage of its height (2 to 40).

Default: 10

indicatorEndColor?string

Bottom colour of the crosshair: it ramps from indicatorColor at the top to this at the bottom (composes with the fade).

indicatorEnd?"plot" | "point"

How far down the crosshair reaches: the whole plot, or down to the hovered point of the first series.

Type: "plot" | "point"
Default: "plot"

dotHaloBlur?number

Blur in px on the dots' halo, for a soft glow.

Default: 0

topOffset?number

Extra gap in px between the top of the plot and the tooltip panel.

Default: 0

dateLabels?readonly string[]

The date pill's text for each data row, in row order (pair it with XAxis labels).

boxSpringConfig?SpringConfig

Spring for the floating panel. Takes priority over matchCrosshair and damping.

indicatorWidth?IndicatorWidth

Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).

Default: "line"

GanttChartLoading

PropType

margin?Partial<ChartMargin>

Space around the plot in px. Missing sides use the chart's default.

Type: Partial<ChartMargin>

rowHeight?number

Height of each skeleton row in px.

Default: 36

label?string

Text shown centered over the skeleton, with a shimmer. Nothing is shown when it is unset or empty.

loadingLabel?string

Deprecated: Use label, the name every chart's placeholder takes..

class?string

Extra class name for the chart container.

Examples

4 examples on Vue, each live with its code and its own install command.

All 4 gantt chart examples

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular Examples

Frameworks

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Preview

Installation

Usage

Anatomy

Phases and progress

Milestones and dependencies

Colors per task

Small screens

Customization

Loading state

Animation

Theming

Accessibility

API reference

GanttChart

GanttTasks

GanttDependencies

GanttToday

GanttXAxis

GanttYAxis

Grid

ChartTooltip

GanttChartLoading

Examples