shadcn.io is not affiliated with official shadcn/ui
Release Pipeline Kanban Block for Vue
A release board with Dev, Staging, Canary and Production environments, slot boxes in each head, and a guard that moves a release one environment at a time into a free slot, with Promote and Roll back buttons.
Installation
Overview
Watch releases move through environments with this release board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four environments, Dev, Staging, Canary and Production, and six release candidates. Every head draws its slots as small boxes, filled for each release it holds, and says it in words ("1 of 2 slots"); every card shows its version in code, its change count and its build date. Two rules refuse a move in words: a release moves one environment at a time, forward or back, never skipping one, and only into a free slot, so Production, which holds one release, names the release that is in it. Each card has Promote and Roll back Buttons for the one-step move, and the card also moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu. The header says what is live, a polite status line reports each move and Reset restores the pipeline. On a phone the columns scroll sideways in one named region. For release managers, staged rollouts and any pipeline with stages that hold a few items.
FAQ
How do I use my own environments and releases?
Edit COLUMNS and START. A column has an id, a name and its slots; a release has an id, the column it starts in, its version as title, changes and a built date in ISO form. Dates are shown by a small helper, not read from the clock. The versions in the demo are made up.
Why was my move refused?
refusalOf checks two things. First the distance: the environment must be next to the one the release is in, so Dev to Canary is refused and names the one that is next. Then the slots: the target must have a free one, and if it is full the message names the release that holds it. The drag, the keyboard, the menu and the two buttons all ask the same function. Roll the other release back first, or promote it.
What are Promote and Roll back for?
They are the one-step route, the plainest way to move a release without dragging, and they go through the same guard as a drop. Roll back is disabled in Dev and Promote in Production, where there is nowhere to go; both are named with the version. Moves stay one step each, so a release reaches Production only by passing Staging and Canary.
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 releases live in the component's state, nothing is saved or deployed, and a reload or Reset restores the starting pipeline. To drive a real pipeline, call your deploy API from the put function, move the card only when it succeeds, and show failures in the status line. Keep the order and slot rules 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.