Kanban board
ProA kanban board where cards lift, tilt and spring into the slot that opens for them, with swimlanes and live WIP limits.
- A team board where cards move between statuses.
- Pipelines where ordering within a stage matters.
- Boards that need a per person view.
- Scheduling on dates; use gantt-timeline or week-calendar.
- Read only status summaries; use a table.
- Hundreds of cards per column; virtualize or use customers-table.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this for a team's issue or task board. Load columns, people and cards from your tracker, persist onCardsChange (it receives the full ordered list after every move or edit), and set limit on columns that need WIP limits.
import { KanbanBoard } from "@/components/arc/blocks/kanban-board/kanban-board"; export function Sprint({ issues, team }) { const [cards, setCards] = useState(issues); return ( <KanbanBoard title="Sprint 42" columns={[{ id: "todo", name: "To do" }, { id: "doing", name: "Doing", limit: 4 }, { id: "done", name: "Done" }]} people={team} cards={cards} onCardsChange={next => { setCards(next); saveOrder(next); }} /> );}KanbanBoard
A kanban board with physical drag and drop. The lifted card follows the pointer from where you grabbed it and tilts with speed, a slot opens where it will land, the board scrolls at its edges, and the card springs into the slot on release. Group by assignee for swimlanes, with live WIP limits, quick add and a detail drawer.
columnsKanbanColumn[]sample columnsColumns in order. Set limit on a column to warn when it holds more cards.peopleKanbanPerson[]sample peopleAssignees, used for avatars, swimlanes and the assignee select.cardsKanbanCard[]–Controlled cards in board order. Leave out for uncontrolled use.defaultCardsKanbanCard[]sample cardsInitial cards when uncontrolled.onCardsChange(cards: KanbanCard[]) => void–Called with the full ordered list after every move, edit, checklist toggle or new card.defaultGroupBy"status" | "assignee""status"Start in columns only or in swimlanes by assignee.currentUserstringfirst personPerson id that new cards are assigned to.titlestring"Billing v2"Board title.classNamestring–Extra class on the root.- Enter
- Opens the focused card's details.
- Space
- Lifts the focused card; Space or Enter drops it.
- Arrow upordown
- Moves a lifted card within its column.
- Arrow leftorright
- Moves a lifted card to the neighbouring column.
- Shift+arrow upordown
- Moves a lifted card to the neighbouring swimlane.
- Escape
- Cancels a drag and returns the card, or closes the drawer.
- Cards are focusable buttons with a draggable role description and a label that includes title, id and assignee.
- Every pick up, move and drop is announced in an assertive live region with the column and position.
- The drawer is a modal dialog: focus moves in, Tab is trapped, Escape closes it and focus returns to the card.
- WIP limits are shown with text as well as color.
- The lifted card rides pointer motion values, lifts slightly and tilts on a spring from horizontal velocity.
- Neighbours glide aside with layout springs as the slot moves; on release a small spring chases the slot's live position and carries the throw velocity.
- Switching to swimlanes flies every card to its lane with shared layout ids.
- Reduced motion drops tilt and travel; drops land at once.
- Columns keep a readable minimum width and the board scrolls sideways with snap on phones.
- The drawer covers the board on narrow frames.
- Auto scroll works on both axes when dragging near an edge.
- Only the dragged card moves every frame, through transforms; hit testing reads a few rects per move.
- Cards are memoized and use position only layout animation.
- Comfortable up to a few hundred cards.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose this for issue boards, sales pipelines, hiring stages or any status workflow with manual ordering.
- Persist onCardsChange: the array order is the order within each column.
- Touch starts a drag after a short press so swipes still scroll the board.
- Use limit on columns for WIP limits; counts update live while dragging.
The full library index for assistants is at /llms.txt.
