# Kanban

Source: https://lumeo.nativ.sh/components/kanban

# Kanban

A drag-and-drop kanban board for visualizing workflow stages. Organize cards into columns representing different states like To Do, In Progress, and Done.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Kanban />

## When to Use

-   Task boards for project management with drag-and-drop between columns
-   Workflow visualization with stages like To Do, In Progress, and Done
-   Issue trackers and sprint boards for agile development teams
-   Pipeline management for sales, recruitment, or content workflows

Preview Code

Drag & Drop Board

To Do3

Design

Design new landing page

Create wireframes and mockups.

Docs

Write API documentation

DevOps

Set up CI/CD pipeline

In Progress2

FrontendHigh

Build authentication flow

Login, register, reset.

Backend

Optimize database queries

Done2

Done

Project setup

Research

User research

Preview Code

With Add Card Button

Backlog

Add card

Active

Existing task

Already in progress.

Add card

Cards added: 0

Preview Code

Custom Header

Sprint 4

5

UI

Task A

API

Task B

## API Reference

### Kanban

Property

Type

Default

Description

ChildContent

RenderFragment?

—

KanbanColumn components placed inside.

### KanbanColumn

Property

Type

Default

Description

Title

string?

—

Column header title text.

Badge

int?

—

Count badge shown next to the title.

AllowAdd

bool

false

Show an "Add card" button at the bottom of the column.

OnAdd

EventCallback

—

Fired when the "Add card" button is clicked.

HeaderContent

RenderFragment?

—

Custom header content (overrides Title/Badge).

OnDrop

EventCallback<DragEventArgs>

—

Invoked when a card is dropped into this column.

### KanbanCard

Property

Type

Default

Description

Title

string?

—

Card title text.

Description

string?

—

Card description text (truncated to 2 lines).

Labels

List<KanbanLabel>?

—

Colored labels shown at the top of the card.

Avatar

string?

—

Assignee avatar image URL shown at bottom-right.

Draggable

bool

true

Enable HTML drag-and-drop on the card.

OnClick

EventCallback

—

Fired when the card is clicked.

### KanbanLabel

Property

Type

Description

Text

string

Label display text.

Color

string

Color key: "primary", "destructive", "warning", "success", "secondary".

## Related Components

-   [SortableList](/components/sortable-list) — Reorderable list for single-column drag-and-drop
-   [Card](/components/card) — Card container used as the visual basis for kanban items
-   [Badge](/components/badge) — Labels and status indicators for kanban cards