# Kanban board

> Sprint board with drag between columns, WIP limits, quick add and points.

Block · Pro · https://lodeui.com/blocks/kanban-board

## When to use

- Task and sprint tracking.

## When not to use

- Sales deals: use the CRM pipeline.

## Installation

```bash
npx shadcn@latest add @lode/kanban-board
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { KanbanBoard } from "@/components/blocks/kanban-board";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <KanbanBoard />
    </main>
  );
}
```

Built from: Avatar group, Badge

## API reference

### KanbanBoard

A sprint board with drag between columns, WIP limits, quick add and points per column. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach each card's column select and add buttons |
| Enter | Add the typed task |
| Esc | Cancel adding |

## Accessibility

- Every card has a column select, so moving never needs a mouse.
- Columns are labelled; over-limit columns say so in text.

## Motion

- Cards glide between columns with layout animation.

## Responsive behavior

- Columns scroll horizontally on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Persist moves in the column select's onChange and in onDrop.

## Related

- [CRM pipeline](https://lodeui.com/blocks/crm-pipeline) — Drag deals across stages; open, weighted forecast and won totals update live.
- [Sortable list](https://lodeui.com/components/sortable-list) — Drag to reorder, or use arrow keys on the handle; announces moves.