||

Kanban List

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A sortable collection for organizing items in kanban or list views.

kanban-list

Overview

Use Kanban List to organize items into stages and reorder them with drag and drop.

Kanban lists work well for project tasks, editorial workflows, support queues, hiring pipelines, and other processes where items move through a sequence.

Anatomy

A kanban list has stage panels, stage headers, item counts, items, and a drag preview. Kanban view places stages side by side. List view stacks the same stages vertically.

Usage guidance

Use kanban view when users need to scan stages and move items spatially. Use list view when density and vertical scanning matter more.

Keep stage names short and preserve the same item order when switching views. Use columns to limit the stages shown in a compact surface.

Accessibility

Each item is a focusable button with its current stage in the accessible name. Left and right arrow keys move an item between stages. Up and down arrow keys reorder it within the current stage.

Use ariaLabel to give the collection a name that matches its content. Reordering is announced through a live region, and reduced-motion preferences are respected.

Installation

 
npx honestui@latest add kanban-list

Usage

 
import { KanbanList } from "@/components/ui/kanban-list"
<KanbanList
  defaultItems={items}
  onItemsChange={(nextItems) => saveItems(nextItems)}
/>

Examples

List view

Set view="list" to stack the stages vertically. The preview keeps a fixed height and scrolls when its content is taller than the available space.

kanban-list view="list"

API Reference
PropTypeDefaultDescription
viewkanban|list"kanban"Sets the collection layout.
defaultItemsKanbanListItem[]–Sets the initial items.
onItemsChange(items: KanbanListItem[]) => void–Runs after an item is moved.
columnsKanbanListStage[]–Limits the stages shown.
classNamestring–Adds a class name to the root element.
ariaLabelstringKanban listSets the accessible name for the collection.