Photonix

GanttWidget

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

Preview

Roadmap, July 2026

June 2026
Month
16:18
Task Name
01Wed
02Thu
03Fri
04Sat
05Sun
06Mon
07Tue
08Wed
09Thu
10Fri
11Sat
12Sun
13Mon
14Tue
15Wed
16Thu
17Fri
18Sat
19Sun
20Mon
21Tue
22Wed
23Thu
24Fri
25Sat
26Sun
27Mon
28Tue
29Wed
30Thu
31Fri
Usage
"use client";

import { GanttWidget, type GanttTask } from '@photonix/ultimate';

const tasks: GanttTask[] = [
    { id: 'research', name: 'Research', startDate: new Date(2026, 5, 1), endDate: new Date(2026, 5, 6), status: 'completed', progress: 100 },
    { id: 'docs', name: 'Docs migration', startDate: new Date(2026, 5, 7), endDate: new Date(2026, 5, 18), status: 'active', progress: 58 },
];

export default function GanttWidgetBasicExample() {
    return <GanttWidget title="Roadmap" subtitle="June 2026" tasks={tasks} defaultView="Month" style={{ height: 420 }} />;
}

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 Roadmap, July 2026

Month
16:18
Group
Task Name
01Wed
02Thu
03Fri
04Sat
05Sun
06Mon
07Tue
08Wed
09Thu
10Fri
11Sat
12Sun
13Mon
14Tue
15Wed
16Thu
17Fri
18Sat
19Sun
20Mon
21Tue
22Wed
23Thu
24Fri
25Sat
26Sun
27Mon
28Tue
29Wed
30Thu
31Fri
Grouped Tasks
"use client";

import { Box, GanttWidget, type GanttTask } from '@photonix/ultimate';

const tasks: GanttTask[] = [
    { id: '1', name: 'Market Research', startDate: new Date(2026, 0, 1), endDate: new Date(2026, 0, 10), status: 'completed', type: 'work', groupName: 'Phase 1' },
    { id: '2', name: 'User Interviews', startDate: new Date(2026, 0, 5), endDate: new Date(2026, 0, 15), status: 'completed', type: 'work', groupName: 'Phase 1' },
    { id: '3', name: 'Design System', startDate: new Date(2026, 0, 12), endDate: new Date(2026, 1, 5), status: 'active', type: 'personal', groupName: 'Phase 2' },
    { id: '4', name: 'Core Implementation', startDate: new Date(2026, 0, 20), endDate: new Date(2026, 1, 28), status: 'pending', type: 'work', groupName: 'Phase 2' },
];

export default function GanttWidgetGroupedExample() {
    return (
        <Box w="100%">
            <GanttWidget title="Grouped Roadmap" tasks={tasks} />
        </Box>
    );
}

Loading State

Displays a skeleton preview while data is being fetched.

Loading State
"use client";

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

export default function GanttWidgetLoadingExample() {
    return (
        <Box w="100%">
            <GanttWidget title="Project Progress" tasks={[]} loading />
        </Box>
    );
}

Different Views

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

Yearly Overview, 2026

Year
16:18
Group
Task Name
January
February
March
April
May
June
July
August
September
October
November
December
Phase 1
Market Research
Market Research
1.4mo • Jan 1 - Jan 10
User Interviews
User Interviews
1.5mo • Jan 5 - Jan 15
Phase 2
Design System
Design System
3.6mo • Jan 12 - Feb 5
Core Implementation
Core Implementation
5.8mo • Jan 20 - Feb 28
Different Views
"use client";

import { Box, GanttWidget, type GanttTask } from '@photonix/ultimate';

const tasks: GanttTask[] = [
    { id: '1', name: 'Market Research', startDate: new Date(2026, 0, 1), endDate: new Date(2026, 0, 10), status: 'completed', type: 'work', groupName: 'Phase 1' },
    { id: '2', name: 'User Interviews', startDate: new Date(2026, 0, 5), endDate: new Date(2026, 0, 15), status: 'completed', type: 'work', groupName: 'Phase 1' },
    { id: '3', name: 'Design System', startDate: new Date(2026, 0, 12), endDate: new Date(2026, 1, 5), status: 'active', type: 'personal', groupName: 'Phase 2' },
    { id: '4', name: 'Core Implementation', startDate: new Date(2026, 0, 20), endDate: new Date(2026, 1, 28), status: 'pending', type: 'work', groupName: 'Phase 2' },
];

export default function GanttWidgetViewsExample() {
    return (
        <Box w="100%">
            <GanttWidget title="Yearly Overview" tasks={tasks} defaultView="Year" />
        </Box>
    );
}

On this page

Preview
Component API
Variants
Grouped Tasks
Loading State
Different Views
Photonix UI - React Components, Templates & Figma Design System