Kanban Widget

A drag-and-drop kanban board for Filament dashboards. Built on Alpine.js with Livewire integration for real-time persistence.

Requirements#

• bluestarsystem/aura-ui-pro installed (uses the kanban component internally)
• Aura Filament v2.6+

Setup#

Create a widget extending AuraKanbanWidget:

use BlueStarSystem\AuraFilament\Widgets\AuraKanbanWidget;
use BlueStarSystem\AuraFilament\Support\KanbanColumn;
use BlueStarSystem\AuraFilament\Support\KanbanCard;

class TaskKanban extends AuraKanbanWidget
{
    protected ?string $heading = 'Tasks';

    protected function getColumns(): array
    {
        return [
            KanbanColumn::make('todo', 'To Do')->color('neutral')->icon('heroicon-o-clipboard'),
            KanbanColumn::make('in_progress', 'In Progress')->color('primary')->icon('heroicon-o-play'),
            KanbanColumn::make('review', 'Review')->color('warning')->icon('heroicon-o-eye'),
            KanbanColumn::make('done', 'Done')->color('success')->icon('heroicon-o-check'),
        ];
    }

    protected function getCards(): array
    {
        return Task::all()->map(fn ($task) => KanbanCard::make($task->id)
            ->column($task->status)
            ->title($task->title)
            ->description($task->assignee->name)
            ->avatar($task->assignee->avatar_url)
            ->badge($task->priority, $task->priority_color)
            ->url(TaskResource::getUrl('edit', ['record' => $task]))
        )->toArray();
    }

    public function onCardMoved(string $cardId, string $fromColumn, string $toColumn, int $position): void
    {
        Task::find($cardId)->update(['status' => $toColumn, 'sort_order' => $position]);
    }
}

KanbanColumn API#

KanbanCard API#

Responsive#

On mobile (< 640px), columns stack vertically for touch-friendly scrolling.