shadcn.io is not affiliated with official shadcn/ui
Code Review AI Block for React
Review comments you resolve: a timeline of five comments on payments.ts with severity, file and line, a marked excerpt, a folded suggested fix with Copy, a filter and Approve review that waits for the blockers.
Installation
Overview
Turn a model's review into a short list a person can close, with this code review for React with Base UI. A header and a framed panel with a plus mark on each corner show Critwell, a review desk, with five typed comments on payments.ts on a vertical timeline. Each comment has a severity (Blocker, Suggestion or Nit) as a glyph and a word, its file:line in mono, a three-line excerpt with the commented line marked, the explanation, a suggested fix folded in a Collapsible with a Copy button, and Mark resolved, which turns into Reopen. A Toggle Group shows All, Open or Resolved inside a region of fixed height. The verdict is derived ("2 blockers open: not ready to merge", then "Ready to merge") and the Shine Button, Approve review, the only colored control, stays disabled with that reason while a blocker is open. Guides draw the frame; everything moves with CSS only. For pull request review, code audits and any list of findings with a gate.
FAQ
What stays in the page, and how do I make it real?
All of it. The five comments, their excerpts and fixes are typed in the file, and the resolved list lives in state. Nothing is sent and no model read the code. To wire it for real, load comments from your review system in the same shape (severity, line, excerpt, explanation, fix) and post the resolve and the approval where flip and approve run.
Why can I not approve while a blocker is open?
That is the point of the severity. The button stays reachable and explains itself: pressing it names how many blockers remain, and the verdict beside it says the same. Suggestions and Nits never block; they show up as "still open" next to "Ready to merge". Reopening a blocker after approving withdraws the approval.
What does the filter do to the height?
Nothing. The comments sit in a region of fixed height that scrolls, and a filter with no matches shows a short message in the same box instead of shrinking the panel.
How does it work from the keyboard?
Tab reaches each comment's fix disclosure, Copy and the resolve button, each named after its comment so repeated words are not ambiguous. The filter is a toggle group the arrow keys move through, and a polite line reports every resolve, reopen and copy.