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" />