shadcn.io is not affiliated with official shadcn/ui
Code Review Chat Block for React
The thread of a pull request: a PR card with a short diff and a reviewers row that sums approved, requested changes and pending, verdicts posted as messages, Re-request review on each reviewer, and an end pane of files with comment counts.
Installation
Overview
Show a review conversation around one change, with this code review chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Hunkford, a code-review tool, with the thread of pull request 212: the first line of the log is the pull request card with its title, branch, "3 files, +42 -9" summed from its files, a short diff with a sign in the gutter that screen readers hear as "Added" and "Removed", and a reviewers row where each of three people shows a state word and glyph and the card sums "1 approved, 1 requested changes, 1 pending". Reviewers post their verdicts as Message and Bubble rows with a note, "Re-request review" resets one to Pending and, after a Typing Indicator Text, they answer again, and an end pane lists the files with comment counts summed from the verdicts. On a phone a Chat and Files switch shows one pane at a time. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a review tool, a pull request channel or any thread where people sign off.
FAQ
What stays in the page, and how do I make it real?
Everything. The diff, the files, the three reviewers and what they say when asked again are typed in this file, and the third reviewer answers the first message you send. Nothing is sent and no model runs. To wire it for real, post ask's request to your review service where the code says so, keep each reviewer's state from your pull request's reviews and append their messages to the same list as they arrive.
What is worked out from the data?
The totals on the card are sums: files, added and removed lines come from the file list, the reviewers' summary counts their states, and each file's comment count counts the verdict messages that name it. Change a reviewer's state or a message and every number follows; nothing is typed twice.
What does Re-request review do?
It sets that reviewer to Pending, adds a line saying you asked again, shows a typing line, and after a moment they post a new verdict from a typed script. A pending reviewer's button is disabled and reads "Review requested" until they answer, so a request cannot be sent twice. Focus stays on the button, which keeps its place.
How is the diff drawn?
As a numbered list of lines, each with a sign in a narrow gutter. Added lines carry a faint tint, removed lines are struck through and quiet, and neither depends on color: the sign is in the gutter and a hidden "Added" or "Removed" starts each line for a screen reader. Code is always left to right, and a long line scrolls sideways in a region the keyboard can reach.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. Every message starts with a hidden name and time, a verdict is a glyph and a word (Approved, Changes requested, Pending) rather than a color, and the buttons say whom they concern ("Re-request review Ansel Kuroda"). Tab runs through the cards, the buttons, the field and Send.