shadcn.io is not affiliated with official shadcn/ui
UI Style Audit Kanban Block for React
A three-column UI audit board of nine findings, each with a type glyph and word, where a finding can't be marked Verified without passing Fixing and a before and after note.
Installation
Overview
Work through a UI quality audit with this board for React with Base UI. A hairline frame with a plus mark on each corner holds three columns that share their lines (Found, Fixing and Verified) and nine findings. Each card names its type as a glyph and a word in an outline Badge: Inconsistency, Accessibility, Performance, Mobile or Dark mode. Once a fix is under way the card holds a "Before and after" note in an Input, and the board won't call a finding fixed without it: Verified comes only from Fixing, and only with a note, and the refusal says which is missing. Every column head counts its findings and how many carry a note, 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 move and Reset puts the board back. The frame is ruled by Guides. For design reviews, accessibility audits and QA passes that need proof of the fix.
FAQ
Why does Verified need a note?
A fix nobody can read back is hard to trust, so refusalOf refuses Verified for a finding whose note is empty, and for one that didn't come from Fixing. The note is the card's note field, kept as you type; the status line stays quiet while you type and speaks when you move the card. Replace the rule if you want a stricter one, such as a screenshot link.
How do I change the finding types?
Edit the Kind type and the KindMark component, which draws a small icon for each type. The word always sits beside the glyph, so a type never depends on colour or on the icon alone.
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 put for moves and save the note when the field loses focus. 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.