shadcn.io is not affiliated with official shadcn/ui
Kanban Task List Block for Ark UI
Three lanes, To do, Doing and Done, with a limit of three cards in Doing, an Advance button and a Move to select on every card, no dragging, and an add field that puts a card at the top of To do.
Installation
Overview
Keep a personal board honest about how much is in progress, with this kanban to-do list for React with Ark UI. Three lanes, To do, Doing and Done, sit under an add band with an Input and a Shine Button, the only colored control, that puts a new card at the top of To do. Doing holds three cards at most. Each card is a Checkbox named by its title, a due label worked out from a fixed day, an Advance button that sends it one lane forward, and a Native Select called Move to that sends it to any lane. When Doing is full the select marks the option "Doing is full (3 of 3)" and the status line refuses the move. Ticking a card moves it to Done and unticking sends it back to To do; a moved card lands at the top of its lane, fades in, and focus stays on its select. Lane headers read their counts ("Doing 3/3"), and an empty lane shows an Empty state. There is no pointer drag, so the board works with a keyboard and on a touch screen. Lanes are ruled by hairlines and Guides. For personal boards, small teams and anything that limits work in progress.
FAQ
How do I load my own cards and change the limit?
Replace START (each card has an id, a lane of todo, doing or done, a title, an optional ISO due date and a priority word) and set LIMIT to the number of cards Doing may hold. Lane counts and the full message follow from those.
What stays local, and how do I save for real?
Everything. Adding and moving change state on the page and nothing is sent, so the board resets on reload. In your app write the lane change from put and tick, and the new card from add, to your own store.
What happens when I move a card into a full Doing lane?
Nothing moves. The status line says "Doing is full (3 of 3). Finish or move one out of it first." and focus stays on the card's select. Moving a card out of Doing, or ticking it, makes room again.
Why is there no dragging?
Moves are buttons and a select so they work the same with a keyboard, a screen reader and a touch screen, and the board never rearranges under the pointer. For a draggable board see the kanban category.