shadcn.io is not affiliated with official shadcn/ui
Review Checklist Block for Radix UI
A pull request review checklist with required items, a verdict that flips to Ready to approve, a review comment written from the open required items, and an Approve button that waits.
Installation
Overview
Turn a review into a verdict and a comment, with this review checklist block for React with Radix UI. A narrow frame opens with a verdict band, Needs work or Ready to approve, and a line counting the required items still open. Twelve checks sit in three bands (Quality, Tests, Docs), each a Checkbox named by its title, and five carry a Required Badge. Below them a read-only Textarea writes the review comment for you from the required items still open ("Please address:" and a list), with a Copy Button to paste it into the pull request. The foot holds the one Shine Button, Approve, which stays aria-disabled until every required item is ticked and says what it waits on. Bands are ruled by Guides. For code review tools, editorial sign-off and any hand-off with must-haves and nice-to-haves.
FAQ
What makes an item Required?
A required flag on the item in START. Only required items change the verdict, the comment and the Approve button; the others are tracked and counted in their band but never block. The badge is real text, so the difference does not rely on color.
How is the review comment written?
It is built from the state on every change: "Please address:" followed by one line for each required item still open, or "All required items are done. Looks good to me." when none are. The field is read-only because the text is derived, so it can never disagree with the boxes.
How does Approve wait?
It is aria-disabled, so it stays focusable and a screen reader hears why. The foot says "Waiting on 2 required items" and an outline button moves focus to the first open one. Pressing Approve when ready only marks the review approved here and locks the boxes; Reopen review undoes it.
What stays local, and how do I wire it for real?
The ticks, the verdict, the comment and the approval all live on the page; nothing is posted. In your app, load the checks from your review template, post the comment from a handler on the Copy button or a separate Send action, and call your review API from approve.