Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Code Review Comments Block for Radix UI

A code review window with a 14-row diff, numbered rows that open threads and composers, Resolve and Reopen, a suggested change with Apply and Copy, and a Submit review button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Review a change line by line, with this code review window for React with Radix UI. A framed window has a top bar with the file name in mono, a badge that says Changes requested while any thread is open, and the one primary, a Shine Button for Submit review. The body is a 14-row diff in a scroll region: added and removed rows have a muted band, a plus or minus glyph and hidden words for a screen reader, never red and green. Each row number is a Button that opens a composer under that row, or a reply if the row already has a thread. Three threads are there already, each with Resolve and Reopen, and one has a suggested change showing the old and new row, with Apply, which rewrites the row and resolves the thread, and Copy. A Textarea takes new comments. It is built from Button, Shine Button, Textarea, Avatar, Badge and Guides, with a CSS entrance only. For code review tools, pull request pages and any place where comments belong to a line.

FAQ

How do I use my own diff?

Edit RAW_ROWS (a change of add, remove or context, and the text) and START for the threads: each has a row number, its remarks and an optional suggestion for that row. Row numbers are the position in the diff. Resolved threads are listed in START_RESOLVED.

What does Apply do?

It replaces the row's text with the suggestion, resolves the thread and moves focus to the thread's Reopen button, and the status line says which row changed. Apply then reads Applied and does nothing more. Copy puts the suggested row on the clipboard if the browser allows it and says so if it does not.

What stays local?

The diff, the threads, the applied suggestions and the review. Submit review only says Review submitted in this demo. To make it real, send comments and resolutions to your review API, apply suggestions as commits on the server and compute the review state from the open threads there.

Why is the code always ltr?

Code keeps one reading direction whatever language the page is in, so the rows are marked that way and sit unchanged inside a layout that flips for right-to-left languages. Names and counts around them are isolated so mixed text keeps its order.

Is it accessible?

Each row number is a button named for what it does (Comment on row 9, Reply on removed row 3) and reports whether its composer is open. Added and removed rows are written in hidden text as well as shown with a glyph, so colour is never the only signal. Focus moves into a new composer, back to the row after Cancel or a post, and to Reopen after Apply.

How does it look on a phone?

The row numbers stay, long lines wrap instead of scrolling, and thread cards go full width under their row. The window keeps its height and only the diff scrolls.