shadcn.io is not affiliated with official shadcn/ui
Design Review Checklist Block for Vue
A design review with Visual, UX and Technical sections, a note for the author in each, a summary of which sections are reviewed, and a Send review button that waits for all three.
Installation
Overview
Let a reviewer say what is open and why, with this design review block for Vue with Ark UI. Three sections (Visual, UX, Technical) each hold three Checkbox checks and a Textarea for a note to the author with a character count. A section counts as Reviewed when every check is ticked or its note explains the open ones, and says "2 open: a note is required" until then. A summary cell at the start lists each section's state and note and holds the only colored control, a Shine Button named Send review that stays aria-disabled until all three sections are reviewed; the status names the first one missing and an outline button focuses its note. Cells share one frame ruled by Guides. For design critiques, QA hand-offs and any review where an unticked box needs a reason.
FAQ
When is a section Reviewed?
When all its checks are ticked, or when its note holds text. The rule is two small functions, openIn and reviewedOf, so you can tighten it, for example by requiring a note of a minimum length.
How does Send review wait?
It is aria-disabled, not disabled, so it stays focusable and screen readers read the reason in the status line, "Waiting on: UX". The outline button beside it moves focus to the note of the first section that is not reviewed. After sending, the checks and notes lock and Reopen review undoes it.
What stays local, and how do I wire it for real?
The checks, the notes and the send are state on the page, and nothing is sent. In your app, save notes as they are typed or on blur, and post the summary from send to your tracker after repeating the reviewed rule on the server.