Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Gantt

A timeline board for scheduled work, dependencies and resource planning.

CorePlanning@gaudi/design-system/core/GanttView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Gantt } from '@gaudi/design-system/core/Gantt';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/gantt-agent-playbook.json.

Usage

import { useState } from 'react';import { Gantt } from '@gaudi/design-system/core/Gantt';
const resources = [{ id: 'design', title: 'Design' }];const initialTasks = [{ id: 'review', title: 'Design review', resourceId: 'design', start: new Date(2026, 9, 4), end: new Date(2026, 9, 6), allDay: true }];
export default function ProjectSchedule() {  const [tasks, setTasks] = useState(initialTasks);  return <Gantt events={tasks} onEventsChange={setTasks} resources={resources} defaultDate={new Date(2026, 9, 4)} defaultScale='week' />;}

Examples

Agent playbook

Storybook

Baseline, dependencies and milestones

Storybook

Day dispatch

Storybook

Project planner with live validation

Storybook

Quarter roadmap with rollups

Storybook

Capacity-aware resource planner

Storybook

Settings menu, row reordering and scheduling

Storybook

Task table with progress

Storybook

API

19 props

Accessibility

Keep the timeline in its own scroll region. Provide labelled date navigation and preserve non-drag ways to inspect scheduled work.

Notes

  • When calendar is supplied, set state options on that instance. The Gantt root still accepts presentation settings, including dependency lines, baseline bars and row selection.
NavigationThe site header block: brand, primary NavigationMenu with a two-block Blog panel (categories beside recent posts) or a Categories panel on the supplied blog route, search, theme switch, and a phone sheet below lg. LayoutContainer renders it from menuProps.SchedulingScheduling building blocks on the Core Calendar and ToggleGroup: a calendar with per-day markers and a single-choice grid of time slots, plus time helpers.7 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesFieldField composes form label, description, error, and input building blocks.7 examples