shadcn.io is not affiliated with official shadcn/ui
Deployment Gates Kanban Block for Solid
A deploy board with Build, Security scan, Staging and Production columns, three tick-box checks on every change, and a gate that refuses to move a change forward until all three are ticked.
Installation
Overview
Hold changes at a gate until they are ready with this deployment board for Solid with Ark UI. A hairline frame with a plus mark on each corner holds four columns, Build, Security scan, Staging and Production, and seven changes. Every change before Production carries three checks as Checkbox rows, Tests passed, Dependency scan clear and On-call approval; each head counts its cards and how many are blocked, and the header sentence works out how many are live, ready to move and blocked. The gate is the rule: a change moves forward only when all three are ticked, and the refusal names the first unticked check and how many are missing. The ticks belong to the gate a change is standing at, so they clear when it arrives in the next column; 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. A polite status line reports each tick and move, and Reset restores the board. On a phone the columns scroll sideways in one named region. For release gates, change approval and any flow where work waits on checklists.
FAQ
How do I add my own checks and services?
Edit CHECKS, COLUMNS and START. A check is an id and a name; a change has an id, its column, a title, the stage the ticks were made in (the same as its column to start) and ticked, the ids already ticked. The gate and the counts read CHECKS, so adding a fourth check needs no other change. Services and versions in the demo are made up.
Why was my move refused?
refusalOf looks at the checks that are not ticked on the card. Moving to a later column with any of them open is refused, and the message names the first one and how many are missing, so the way out is in the text: tick it, then move. Moving to an earlier column is always allowed. The drag, the keyboard and the menu all go through it.
Why do the ticks clear when a change moves?
Each column is a separate gate with its own checks, so approval for the build gate says nothing about staging. settleCards clears the ticks of a card whose column has changed, and the status line says how many checks are to go after every tick. To carry ticks across gates, return the card unchanged instead.
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 ticks and positions live in the component's state, nothing is saved or deployed, and a reload or Reset restores the starting board. To use real results, set ticked from your CI and approvals service, and keep the same rule on the server that does the deploy.
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.