shadcn.io is not affiliated with official shadcn/ui
Design Review Kanban Block for Svelte
A three-column design review queue of eight designs, each with a drawn wireframe and a reviewer count that must be full before a design can move to Approved.
Installation
Overview
Run design critiques from one screen with this review board for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds three columns that share their lines (Submitted, In review and Approved) and eight designs. Each card draws a greyscale wireframe in plain SVG, one of four layouts, and shows its version in an outline Badge and its reviewer count twice: as filled and open dots, and as words ("2 of 3 reviewers approved"). The Approve Button on a card adds one reviewer's approval, and the count gates the board: a design can't move to Approved until every reviewer it needs has approved, and the refusal says how many are missing. Every column head counts its designs and how many have all their reviewers in, and the sentence under the heading is worked out from the cards. A card moves by dragging its grip, from the keyboard, or from its Dropdown Menu under "Move to". A polite status line in the foot reports each change and Reset puts the board back. The frame is ruled by Guides. For design critiques, sign-off queues and any app where work needs a quorum.
FAQ
How does the reviewer count gate Approved?
Each card has need (reviewers it needs) and have (approvals so far). The function refusalOf returns a reason when a design is going to Approved and have is below need, and an empty string otherwise. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the design where it was and the status line gives the reason. Cards that start in Approved are already complete.
How do I add my own designs and wireframes?
Edit COLUMNS and START: a card has an id, a title, a version, the need and have counts and a wire number from 0 to 3 that picks the drawing. To draw your own, add a branch to the Wireframe component: it is plain rect, circle and path marks in the current text colour, so it follows the theme. Counts and sentences are calculated from the cards.
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. 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. Every step is announced in the status line, with the column and the position.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
What stays in the demo, and how do I save the moves?
Everything: the moves live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from the act function for an approval and from put for every finished move, and update the cards from the response. The names and figures are made up.
How does it work 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. 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 status line is still read out to screen readers.