Kanban Board
NewPro
Columns of cards you drag between and reorder, with layout animation and a full keyboard alternative.
Customize
#ff784f
3°
Compact cards
Teammate updates
When to use it
- Task boards in project management and support tools
- Hiring or sales pipelines where deals move through stages
- Content calendars that track drafts from idea to published
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 708
Installation
Kanban Board is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy kanban-board.tsx into components/ui and run npm install motion.
Usage
import { KanbanBoard } from "@/components/ui/kanban-board";
const [columns, setColumns] = useState(initialColumns);
<KanbanBoard
columns={columns}
onChange={(next, move) => {
setColumns(next);
saveMove(move);
}}
/>Props
13 properties| Property | Type | Default | Description |
|---|---|---|---|
| columns | KanbanColumn[] | — | Columns in order: { id, title, color?, limit?, cards }. Cards: { id, title, description?, tag?, tagColor?, assignee?, meta? }. |
| onChange | (columns, move) => void | — | Called with the new columns and { cardId, fromColumn, toColumn, fromIndex, toIndex }. The board shows the columns you pass back. |
| renderCard | (card, state) => ReactNode | — | Replaces the default card content. State is { dragging, lifted }. |
| onCardClick | (card) => void | — | Called on a click, or Enter on a focused card. |
| color | string | "#ff784f" | Accent for drop targets and focus. |
| tilt | number | 3 | Tilt of the card while dragging, in degrees. |
| compact | boolean | false | Tighter cards with no description. |
| columnWidth | number | 232 | Smallest column width in pixels. The board scrolls sideways when they do not fit. |
| maxColumnHeight | number | — | Tallest a column gets before it scrolls. Unset, columns grow with their cards. |
| longPressDelay | number | 180 | Milliseconds a touch has to hold before a drag starts, so swipes still scroll. |
| disabled | boolean | false | Turns off dragging and moving. |
| label | string | "Board" | Accessible name of the board. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion