Data/Kanban Board
KanbanBoard
Drag-and-drop kanban board with columns and cards. Drag cards between columns — the updated columns array is passed to onChange.
import { KanbanBoard } from "@animui/ui"Preview
To Do
2
Design new homepage
Figma wireframes first
Set up CI/CD pipeline
GitHub Actions
In Progress
1
Implement auth flow
NextAuth + Supabase
Done
1
Project kickoff
Team meeting completed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | KanbanColumn[] | — | Array of columns. Each column has id, title, color?, limit?, and cards array. |
onChange | (columns: KanbanColumn[]) => void | — | Called with the updated columns array when a card is dragged to a new column or reordered. |
onCardClick | (card: KanbanCard, columnId: string) => void | — | Called when a card is clicked. Enables pointer cursor on cards when provided. |
renderCard | (card: KanbanCard, columnId: string) => ReactNode | — | Custom card renderer. Receives the card data and its column ID. |
className | string | — | Additional classes on the board wrapper. |