shadcn.io is not affiliated with official shadcn/ui
Code Diff Viewer AI Block for React
Read an AI change before it is applied: three file tabs with plus and minus counts, a unified or side by side diff with old and new line numbers, Dismiss per file, Copy patch and one Apply button.
Installation
Overview
Let people read exactly what a model changed before it touches their code, with this diff viewer for React with Base UI. A header and a framed panel with a plus mark on each corner show Hunkwright, a change reviewer, holding an assistant's change to an upload route in three files. Tabs name the files with their plus and minus counts; a Toggle Group switches Unified or Side by side (side by side is two columns from the medium breakpoint, a phone shows unified only); the diff sits in a region of fixed height with a gutter of old and new numbers, the plus or minus mark and the hunk headers. Dismiss leaves a file out and the region holds an explanation at the same height, Copy patch puts a real unified diff of the files still in on the clipboard, and the Shine Button, the only colored control, applies them in this demo. Guides draw the frame; everything moves with CSS only. For code review, AI changes and any approve-before-write flow.
FAQ
What stays in the page, and how do I make it real?
All of it. The three files and their hunks are typed in the file as compact lines, parsed once, and everything else (counts, hunk headers, the patch) is derived from the rows. Apply only marks the files applied and says that nothing was written. To wire it for real, write the files, or call git apply, where apply runs, and feed the viewer hunks parsed from your own diff.
Is the copied patch real?
Yes. It holds a diff --git header, the --- and +++ lines (/dev/null for the new file), an @@ header per hunk with counts computed from the rows, and each row with its space, plus or minus. Files you dismissed are left out.
What does Dismiss do, and can I undo it?
It removes the file from Copy patch and from Apply, marks its tab "Dismissed" and replaces the diff with a short explanation and a Restore button. The same foot button reads "Restore file" while a dismissed file is shown, and "Undo apply" after Apply.
How does it work from the keyboard?
The file tabs are a tab list the arrow keys move through, the layout switch is a toggle group, and the diff region is focusable so a keyboard can scroll it in both directions. Every button says which file or action it is for.