Photonix UI - React Components, Templates & Figma Design System

GanttWidget

A premium widget for displaying project timelines and schedules using a Gantt chart.

Preview

Usage

import { GanttWidget } from '@photonix/ultimate';

const tasks = [
  {
    id: '1',
    name: 'UI Design',
    startDate: new Date(2026, 0, 5),
    endDate: new Date(2026, 0, 15),
    type: 'work'
  },
  // ...
];

<GanttWidget 
  title="Release Plan" 
  tasks={tasks}
  defaultView="Month"
/>

Component API

GanttWidget

Prop	Type	Default	Description
title	`string`	`-`	Header title
subtitle	`string`	`-`	Header subtitle
tasks	`GanttTask[]`	`[]`	Array of task items
loading	`boolean`	`false`	Loading state
defaultView	`GanttViewMode`	`'Month'`	Initial view mode ('Day', 'Week', 'Month', 'Year')
headerExtraContent	`React.ReactNode`	`-`	Component to display in the header (e.g., custom filters)
footer	`React.ReactNode`	`-`	Content to display below the chart
appearance	`WidgetAppearance`	`'outlined'`	Widget appearance
padding	`string \| number`	`-`	Widget padding (default: 16px)
style	`React.CSSProperties`	`-`	Custom style
className	`string`	`-`	Custom class name

Variants

Grouped Tasks

Organize tasks into collapsible or sticky groups using groupName.

Grouped Tasks

<GanttWidget 
  title="Grouped Roadmap" 
  tasks={GANTT_TASKS} 
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State

<GanttWidget title="Project Progress" tasks={[]} loading />

Different Views

The widget supports Day, Week, Month, and Year views.

Different Views

<GanttWidget 
  title="Yearly Overview" 
  tasks={GANTT_TASKS} 
  defaultView="Year"
/>

GanttWidget

Preview

Project Roadmap 2026, June 2026

Component API

GanttWidget

Variants

Grouped Tasks

Grouped Roadmap, June 2026

Loading State

Different Views

Yearly Overview, 2026

On this page