shadcn.io is not affiliated with official shadcn/ui
Project Phases Kanban Block for Radix UI
A four-phase project board of nine deliverables with a gate checklist under each phase, where a deliverable can enter the next phase only once every gate it crosses is complete.
Installation
Overview
Run a project through its phases with this gated kanban for React with Radix UI. A hairline frame with a plus mark on each corner holds four phase columns that share their lines (Discovery, Design, Build and Launch) and nine deliverables, each with its due date and its owner's initials in an Avatar. Under the board sit three gates, one for each phase that has a successor: a short checklist of Checkbox rows with a count ("2 of 3"). A deliverable may move forward only through gates that are complete, so while the Build gate has open checks nothing reaches Launch, and the refusal names the gate and says how many checks are open; moving back is always allowed. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The sentence under the heading counts the complete gates, and a polite status line in the foot reports every move and every tick. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region and the gates stack under it. For client projects, launch plans and any work where a phase must be signed off before the next begins.
FAQ
How do I fill it with my own phases and checks?
Edit COLUMNS, GATED, CHECKS, START_TICKS and START. A check has an id, the phase it closes and its text; START_TICKS lists the ids that begin ticked. A deliverable has an id, a title, an owner's name (the initials are drawn from it), a due date and the column it starts in. Every count and sentence is calculated from the cards and the ticks.
How does a gate decide whether a card can move?
shutGate looks at every phase a move would cross, from the card's column up to the one before its target, and returns the first whose checks are not all ticked. refusalOf turns that into a sentence, so a card from Discovery to Build needs both the Discovery and the Design gates complete, and a card going back crosses nothing. The drop, the keyboard steps and the menu all ask it, so no route gets around it. Unticking a check closes the gate again, but cards already past it stay where they are.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the deliverable's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. A step that would cross an open gate is refused in the status line and the card stays where it was. Every step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every phase under "Move to" with the current one ticked, so one choice moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo, and how do I save it?
Everything: The moves and the ticks live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through, and from flip, which handles a tick, then update the state from the response. The product, the people and the cards are made up.
How does it look on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps when a card moves. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The three gates stack in one column under the board.