Laravel Kanban Component

Pro

Drag-and-drop Kanban board with customizable columns and cards for project and task management.

A Kanban built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::kanban>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Kanban is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::kanban>
    <x-aura::kanban.column title="To Do" color="gray">
        <x-aura::kanban.card title="Design homepage" description="Create wireframes and mockups" />
        <x-aura::kanban.card title="Write API docs" />
    </x-aura::kanban.column>

    <x-aura::kanban.column title="In Progress" color="blue">
        <x-aura::kanban.card title="Build auth flow" description="Login, register, password reset" />
    </x-aura::kanban.column>

    <x-aura::kanban.column title="Done" color="green">
        <x-aura::kanban.card title="Database schema" description="All migrations complete" />
    </x-aura::kanban.column>
</x-aura::kanban>

See the full API, props and live examples in the Kanban documentation.

Overview

The Kanban component provides a drag-and-drop board layout with columns and cards, commonly used for project management, task tracking, and workflow visualization. Cards can be dragged between columns, and the component dispatches events so you can persist changes via Livewire.

Props

Kanban

The root component has no configurable props. It manages drag-and-drop state internally via Alpine.js.

Kanban Column

Prop	Type	Default	Description
`title`	`string`	`''`	Column heading text.
`color`	`string`	`'gray'`	Column accent color: `gray`, `blue`, `green`, `yellow`, `red`, `purple`, `pink`.

Kanban Card

Prop	Type	Default	Description
`title`	`string`	`''`	Card heading text.
`description`	`string\|null`	`null`	Optional description text below the title.

Slots

Slot	Component	Description
default	`kanban`	Contains `kanban.column` children.
default	`kanban.column`	Contains `kanban.card` children.
default	`kanban.card`	Optional custom content to render inside the card body.

Card with Custom Content

:::example <x-aura::kanban.card title="Design system">

<x-aura::badge variant="info" size="sm">Design</x-aura::badge> Due: Feb 20

</x-aura::kanban.card> :::

<x-aura::kanban.card title="Design system">
    <div class="mt-2 flex items-center gap-2">
        <x-aura::badge variant="info" size="sm">Design</x-aura::badge>
        <span class="text-xs text-gray-500">Due: Feb 20</span>
    </div>
</x-aura::kanban.card>

See more examples and every variant in the Kanban documentation.

Laravel-native

No JavaScript framework. Pure Blade, Livewire & Alpine.

Dark mode & themeable

Tailwind 4 CSS variables and a visual Theme Studio.

Accessible

WCAG 2.1 AA-minded, keyboard and ARIA support.