shadcn.io is not affiliated with official shadcn/ui
Kanban Board CRUD Block for Ark UI
A design studio's work board with To do, Doing and Done columns where each card has a Move to menu, an Edit dialog and a Delete that leaves an Undo placeholder, each column adds a card on Enter, and Doing holds at most three.
Installation
Overview
Run a studio's work from one board without a single drag, with this kanban board for React with Ark UI. A framed window of fixed height holds three columns, To do, Doing and Done, each with a count and its own scroll. A column's foot is a line where a card title and Enter add a card to it. Every card shows its title, who has it and when it is due, and three things to do: a Move to Dropdown Menu that sends it to another column and is the keyboard route for every move a drag would make, Edit, a Dialog with a title, an assignee and a due date whose Save is the only Shine Button, and Delete, which leaves "Removed Logo sheet" in the same box with an Undo. Doing holds at most three: its count reads "3 of 3", its menu entry says "at its limit of 3" and is disabled, and its Add answers the same in the status. Each column keeps its height and shows an Empty state when its last card goes. The window is framed by Guides. For work boards, content pipelines, support triage and any set of columns where a limit is the rule.
FAQ
How do I use my own cards and columns?
Edit COLUMNS, PEOPLE and START: a card has an id, a col, a title, an assignee id and a due ISO date or an empty string. The limit is the LIMIT constant and applies to the column called doing; counts, the header total and the menu text are derived from the cards.
How do I move a card without dragging?
Press its Move to button and choose a column. The column it is in and a full Doing are disabled with the reason in the entry. Focus stays on the card's Move to button after the move, and the status line says where it went. There is no drag handler at all, so nothing needs a pointer.
What does the limit on Doing do?
Once Doing has three cards it refuses a fourth by any route: the menu entry is disabled, Add answers "Doing is at its limit of 3" and Undo of a removal into a full Doing waits until there is room. Moving a card out, or removing one, opens the column again.
What does Edit change?
The title (required), the assignee from a list and the due date. Save closes the dialog, updates the card in place and returns focus to its Edit button; Cancel closes it with no change. An empty title shows its reason in a line that is always there.
What stays local, and how do I wire a real save?
Cards live in state in this tab and a reload restores the eight; nothing is sent. In your app write each change to your API from add, move, save and remove, and enforce the limit on the server as well, since the count belongs to the data. Undo is a restore call.