Components

Kanban

A drag-and-drop board of columns whose cards can be moved between them.

php artisan blatui:add kanban

@php
    $columns = [
        [
            'id' => 'todo',
            'title' => 'To Do',
            'cards' => [
                ['id' => 't1', 'title' => 'Design the empty state', 'tags' => ['Design'], 'meta' => 'Due in 3 days'],
                ['id' => 't2', 'title' => 'Write release notes', 'tags' => ['Docs', 'Low']],
                ['id' => 't3', 'title' => 'Audit colour contrast', 'tags' => ['A11y']],
            ],
        ],
        [
            'id' => 'doing',
            'title' => 'In Progress',
            'cards' => [
                ['id' => 'd1', 'title' => 'Build the kanban board', 'tags' => ['Feature'], 'meta' => 'Anas'],
                ['id' => 'd2', 'title' => 'Fix drag-and-drop on Safari', 'tags' => ['Bug', 'High']],
            ],
        ],
        [
            'id' => 'done',
            'title' => 'Done',
            'cards' => [
                ['id' => 'p1', 'title' => 'Set up the theme tokens', 'tags' => ['Chore']],
                ['id' => 'p2', 'title' => 'Ship the badge component', 'meta' => 'Merged'],
            ],
        ],
    ];
@endphp

<x-ui.kanban :columns="$columns" class="max-w-3xl" />

API Reference

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

Props

Prop	Type	Default	Description
`columns`*	`array`	`[]`	The board columns, each with its own list of cards. Drag-and-drop reordering is a client-side progressive enhancement and is not persisted. See Each column below.

* Required.

Each column

Prop	Type	Default	Description
`id`	`string`	—	Unique column identifier used as the drag/drop key. Falls back to col-{index} when omitted.
`title`	`string`	—	The column heading shown above its cards. A live card count is appended automatically.
`cards`	`array`	`[]`	The cards in this column, in order. See Each card below.