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
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
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
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
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 — Reorderable list for single-column drag-and-drop
- Card — Card container used as the visual basis for kanban items
- Badge — Labels and status indicators for kanban cards