shadcn.io is not affiliated with official shadcn/ui
Dependency Board Kanban Block for Ark UI
A three-column board where cards name what blocks them, a card with an open blocker can't leave Backlog, and finishing a blocker frees its dependants and says how many.
Installation
Overview
Keep work in the right order with this dependency board for React with Ark UI. A hairline frame with a plus mark on each corner holds three columns, Backlog, In progress and Done, and nine pieces of work that depend on one another. Each card shows what blocks it in an outline Badge with a lock icon ("Blocked by Payments API") or says it is clear to work on, and how many cards wait on it. The rule is the feature: a card with an open blocker can't enter In progress or Done, and the refusal names the blocker and says to finish it first; moving back to Backlog always works. Finishing a blocker frees its dependants in the same update and the status line says how many ("Unblocked 2 cards"); moving a blocker out of Done blocks them again. Each head counts its blocked cards and the header sentence is worked out from the cards. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu. Reset restores the board. On a phone the columns scroll sideways in one named region. For project plans, build orders and any work with prerequisites.
FAQ
How do I describe my own dependencies?
Edit START (the SEED list). Each card has an id, its column, a title and blockedBy, the ids of the cards that must be Done first. Leave open empty: settleCards works out the open blockers from where the cards are, at load and after every move. Cards in the demo are made up.
Why was my move refused?
refusalOf looks at the card's open blockers, the ones not in Done. Moving it to In progress or Done while any are open is refused, and the message names them. Finish them first, then move the card. Moving a card back to Backlog is always allowed, and the drag, the keyboard and the menu all ask the same function.
What happens when a blocker is reopened?
Moving a card out of Done makes it a blocker again, and settleCards recomputes every card's open blockers in the same update. A dependant that is already In progress stays where it is, but it is counted as blocked in its head and the header until the blocker is Done again. Nothing is moved for you.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, the arrow keys move it (left and right change column, and swap in right-to-left languages), Home and End jump to the ends, Space drops it and Escape puts it back. The rule applies to every step, and each step is announced in the status line.
What stays in the demo?
Everything: the cards live in the component's state, nothing is saved, and a reload or Reset restores the starting board. To use real data, load cards and their blockers from your tracker, save the move from put, and check the rule on the server as well.
How does it look on a phone?
The columns scroll sideways with the next column showing, each column scrolls inside the board's fixed height, and nothing changes size when a card moves or a move is refused. Touch drags from the grip only, so the board still scrolls; the card's menu is the other way to move it.