shadcn.io is not affiliated with official shadcn/ui
Audit Checklist Kanban Block for Ark UI
A three-column security audit (Open, Checking, Verified) of nine controls, each with evidence tick boxes that must all be ticked before the control can move to Verified.
Installation
Overview
Track a security audit with this checklist board for React with Ark UI. A hairline frame with a plus mark on each corner holds three columns, Open, Checking and Verified, and nine controls. Every card shows the control, an area in an outline Badge, how much of its evidence is in, and a list of the evidence itself, each piece with a Checkbox. The ticks gate the last column: a control reaches Verified only when every piece of evidence is ticked, and the refusal says how many are missing. A verified control keeps its ticks, and unticking one asks you to move the control out first. Each column head counts its cards and the evidence ticked, and the sentence under the heading is worked out from the cards. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to"; a polite status line reports each change and Reset restores the audit. On a phone the columns scroll sideways in one named region. For security reviews, certification prep and any checklist where proof comes before sign-off.
FAQ
How do I fill it with my own controls?
Edit COLUMNS and START. A control has an id, the column it starts in, an area, a title and a proof list of { id, label, done } items. The counts, the evidence totals and the header sentence are calculated from the cards.
How does the Verified gate work, and how do I change it?
refusalOf gets the cards, the control, where it comes from and where it is going, and returns a reason or an empty string. Drag, keys and menu all ask it, so no route gets around it. A refused move leaves the control where it was and the status line says how many pieces of evidence are missing. Replace the body with your own rule, such as needing a named reviewer.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Press Space or Enter to pick it up, the arrow keys to move it (left and right change column, and swap in right-to-left languages), Space or Enter to drop it and Escape to put it back. Every step is announced in the status line.
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. Choosing one moves the card, puts focus on it in its new place and says so in the status line, and it obeys the same rule as a drag.
What stays in the demo, and how do I save the ticks?
Everything: ticks and moves live in the component's state, nothing is uploaded or saved, and a reload or Reset restores the starting audit. To save for real, call your API from act for a tick and from put for a move, and update the cards from the response. The controls are made up and are not a real framework.
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. The evidence list stays on the card, so cards are taller than in the simpler boards. Touch drags from the grip only; the menu moves a card with a single tap.