# Kanban board

Column-based task board layout primitive. Provides board frame, columns (title / count / accent / action), and cards (title / description / leading / trailing / meta). Layout only — apps wire drag-and-drop with their own DnD library (e.g. `@dnd-kit/core`). On small screens columns snap-scroll horizontally so swipes feel native.

[View examples](https://marsam.rahhal.app/components/kanban) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/kanban`

**Category:** `surfaces`

## Anatomy

| part | role |
| --- | --- |
| Kanban | outer flex row with horizontal snap-scroll |
| KanbanColumn | one column — sticky header + scrolling card list + footer |
| KanbanColumnAddButton | pre-styled "+" trigger for the column action slot |
| KanbanCard | single card — title + description + leading + trailing + meta row |

## KanbanColumn props

| prop | type | purpose |
| --- | --- | --- |
| title | ReactNode | column heading |
| count | number | small badge next to the title |
| accent | string (Tailwind class) | header dot color, e.g. "bg-emerald-500" |
| action | ReactNode | trailing slot (typically the add button) |
| footer | ReactNode | below the cards |

## Adding drag-and-drop

This package ships layout only. Wire DnD with [`@dnd-kit/core`](https://dndkit.com/) (recommended — same library Apple's developer docs use in their React samples). Wrap each `<KanbanCard>` in `<Sortable>` and each `<KanbanColumn>` in `<Droppable>`. Persistence and optimistic state belong in app code, not in this package.