Components

Gantt

A project timeline (Gantt) chart with task bars positioned by date and progress.

php artisan blatui:add gantt

Project timeline from June 1, 2026 to June 30, 2026, 6 tasks.
Task	Jun 1	Jun 8	Jun 15	Jun 22	Jun 29
Discovery	Discovery, Jun 1 – Jun 5, 100% complete
Design	Design, Jun 4 – Jun 12, 80% complete
Frontend	Frontend, Jun 10 – Jun 22, 55% complete
Backend	Backend, Jun 11 – Jun 24, 40% complete
QA & testing	QA & testing, Jun 20 – Jun 28, 10% complete
Launch	Launch, Jun 27 – Jun 30, 0% complete

Today · Jun 15, 2026

@php
    $tasks = [
        ['name' => 'Discovery',     'start' => '2026-06-01', 'end' => '2026-06-05', 'progress' => 100],
        ['name' => 'Design',        'start' => '2026-06-04', 'end' => '2026-06-12', 'progress' => 80,  'color' => 'bg-violet-500'],
        ['name' => 'Frontend',      'start' => '2026-06-10', 'end' => '2026-06-22', 'progress' => 55],
        ['name' => 'Backend',       'start' => '2026-06-11', 'end' => '2026-06-24', 'progress' => 40,  'color' => 'bg-sky-500'],
        ['name' => 'QA & testing',  'start' => '2026-06-20', 'end' => '2026-06-28', 'progress' => 10,  'color' => 'bg-amber-500'],
        ['name' => 'Launch',        'start' => '2026-06-27', 'end' => '2026-06-30', 'progress' => 0,   'color' => 'bg-emerald-500'],
    ];
@endphp

<x-ui.gantt :tasks="$tasks" unit="week" today="2026-06-15" class="max-w-3xl" />

Milestones

Project timeline from July 1, 2026 to July 31, 2026, 6 tasks.
Task	Jul 1	Jul 8	Jul 15	Jul 22	Jul 29
Kickoff	Kickoff, milestone on Jul 1
Research	Research, Jul 1 – Jul 7, 100% complete
Prototype	Prototype, Jul 6 – Jul 15, 70% complete
Design review	Design review, milestone on Jul 15
Build	Build, Jul 16 – Jul 30, 30% complete
Beta release	Beta release, milestone on Jul 31

Today · Jul 14, 2026

@php
    // Mix of multi-day tasks and single-day milestones (rendered as diamonds).
    $tasks = [
        ['name' => 'Kickoff',         'start' => '2026-07-01', 'end' => '2026-07-01', 'color' => 'bg-emerald-500'], // milestone
        ['name' => 'Research',        'start' => '2026-07-01', 'end' => '2026-07-07', 'progress' => 100],
        ['name' => 'Prototype',       'start' => '2026-07-06', 'end' => '2026-07-15', 'progress' => 70,  'color' => 'bg-violet-500'],
        ['name' => 'Design review',   'start' => '2026-07-15', 'end' => '2026-07-15', 'color' => 'bg-amber-500'],  // milestone
        ['name' => 'Build',           'start' => '2026-07-16', 'end' => '2026-07-30', 'progress' => 30,  'color' => 'bg-sky-500'],
        ['name' => 'Beta release',    'start' => '2026-07-31', 'end' => '2026-07-31', 'color' => 'bg-rose-500'],   // milestone
    ];
@endphp

<x-ui.gantt :tasks="$tasks" start="2026-07-01" end="2026-07-31" unit="week" today="2026-07-14" class="max-w-3xl" />

API Reference

Props, slots and exposed methods for <x-ui.gantt>.

Props

Prop	Type	Default	Description
`tasks`*	`array`	`[]`	The rows to plot. Each task is drawn as a bar across the timeline; a one-day task renders as a diamond milestone instead. See Each task below.
`start`	`string`	—	Overall range start as "YYYY-MM-DD". Defaults to the earliest task start.
`end`	`string`	—	Overall range end as "YYYY-MM-DD". Defaults to the latest task end.
`unit`	`string`	`'day'`	Granularity of the header buckets above the timeline. `day` `week` `month`
`today`	`string`	—	Override the "today" marker date as "YYYY-MM-DD" (useful for stable demos). The vertical marker only shows when this date falls inside the range. Defaults to the real current day.

* Required.

Each task

Prop	Type	Default	Description
`name`	`string`	—	The task label shown in the sticky left column (and on the milestone marker).
`start`*	`string`	—	Task start date as "YYYY-MM-DD". Tasks missing a start or end are skipped.
`end`*	`string`	—	Task end date as "YYYY-MM-DD", inclusive. When equal to start the task renders as a diamond milestone.
`progress`	`int`	—	Completion percentage 0–100. Dims the unfilled remainder of the bar and shows a percentage chip. Omit for no progress fill.
`color`	`string`	`'bg-primary'`	A literal Tailwind background class for the bar or milestone, e.g. "bg-sky-500". Must be a static class so the JIT compiler can see it.