# Kanban

Published: November 26, 2025

Version: ^2.9.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_9_0_kanban_hero.png" alt="Kanban board with multiple columns showing workflow stages" />

Project management, task tracking, workflow visualization—kanban boards are everywhere. Designing them from scratch can be tedious, so we figured Flux should make it easy.

Cheeck out our new **Kanban** system, a collection of components for building beautiful workflow boards. Take a look.

```blade
<flux:kanban>
    @foreach ($columns as $column)
        <flux:kanban.column>
            <flux:kanban.column.header :heading="$column->title" :count="count($column->cards)" />

            <flux:kanban.column.cards>
                @foreach ($column->cards as $card)
                    <flux:kanban.card :heading="$card->title" />
                @endforeach
            </flux:kanban.column.cards>
        </flux:kanban.column>
    @endforeach
</flux:kanban>
```

## Column arrangements

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_9_0_kanban_column.png" alt="Kanban column header with heading, count, and action buttons" />

Columns support headings, counts, and action slots. Add dropdowns for column management or quick-add buttons:

```blade
<flux:kanban.column.header heading="In Progress" count="5">
    <x-slot name="actions">
        <flux:dropdown>
            <flux:button variant="subtle" icon="ellipsis-horizontal" size="sm" />

            <flux:menu>
                <flux:menu.item icon="plus">New card</flux:menu.item>
                <!-- ... -->
            </flux:menu>
        </flux:dropdown>

        <flux:button variant="subtle" icon="plus" size="sm" />
    </x-slot>
</flux:kanban.column.header>
```

## Flexible cards

Cards are composable with header and footer slots for maximum flexibility.

### Card headers

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_9_0_kanban_card_headers.png" alt="Kanban card with badge header showing task categories" />

Use the header slot for badges, tags, or labels:

```blade
<flux:kanban.card heading="Update privacy policy">
    <x-slot name="header">
        <div class="flex gap-2">
            <flux:badge color="blue" size="sm">UI</flux:badge>
            <flux:badge color="green" size="sm">Backend</flux:badge>
            <flux:badge color="red" size="sm">Bug</flux:badge>
        </div>
    </x-slot>
</flux:kanban.card>
```

### Card footers

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_9_0_kanban_card_footers.png" alt="Kanban card with footer showing avatars and metadata" />

Use the footer slot for avatars, icons, or metadata:

```blade
<flux:kanban.card heading="Update privacy policy">
    <x-slot name="footer">
        <flux:icon name="bars-3-bottom-left" variant="micro" class="text-zinc-400" />

        <flux:avatar.group>
            <flux:avatar circle size="xs" src="..." />
            <!-- ... -->
        </flux:avatar.group>
    </x-slot>
</flux:kanban.card>
```

Cards can also be made clickable with `as="button"` to open modals or detail views:

```blade
<flux:kanban.card as="button" wire:click="edit({{ $card->id }})" heading="{{ $card->title }}">
    <!-- ... -->
</flux:kanban.card>
```

## Drag & drop

Flux doesn't ship with drag-and-drop features, but you can add them using Alpine's [x-sort plugin](https://alpinejs.dev/plugins/sort) or preferably [wire:sort](https://livewire.laravel.com/docs/4.x/wire-sort) in Livewire 4 (currently in beta):

```blade
<flux:kanban wire:sort="moveColumn">
    @foreach ($columns as $column)
        <flux:kanban.column
            :wire:key="$column->id"
            :wire:sort:item="$column->id"
        >
            <flux:kanban.column.header :heading="$column->title" :count="count($column->cards)" />

            <flux:kanban.column.cards wire:sort="moveCards">
                @foreach ($column->cards as $card)
                    <flux:kanban.card
                        :heading="$card->title"
                        :wire:key="$card->id"
                        :wire:sort:item="$card->id"
                    />
                @endforeach
            </flux:kanban.column.cards>
        </flux:kanban.column>
    @endforeach
</flux:kanban>
```

---

Check out the [Kanban documentation](https://fluxui.dev/components/kanban) for more examples and the full API reference.