shadcn.io is not affiliated with official shadcn/ui
Diff Viewer Changelog Block for Radix UI
One config file's diff in a framed, focusable region, with Previous change and Next change buttons that move a ring from hunk to hunk and a live count.
Installation
Overview
A diff viewer for React with Radix UI, written for Strikeline, a fictional config-management tool. A header has Previous change and Next change buttons at its end and a live "Change 2 of 5" under them. Below it a framed region holds one file's diff: every row has its two line numbers, a sign ("+" added, "-" removed, nothing for unchanged) and the text in mono, with the tint only a faint foreground mix. The five edits are five hunks, and the current one is ringed; the buttons move the ring and scroll that hunk into view, and past the last one Next goes back to the first. A Copy patch button in the bar copies the real unified diff. It's built from Button, Copy Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For config reviews, deploy approvals and release notes that change a file. The file and its changes are example data.
FAQ
How do I change the file?
Edit DIFF_LINES at the top of the file: one string per line, starting with a space for an unchanged line, "-" for a removed one or "+" for an added one. The line numbers, the hunks (each run of changed lines) and the "Change N of M" count are all worked out from those lines, so the count is always the number of hunks shown.
How does the stepper work, and what does it say?
Previous change and Next change move the ring to the neighbouring hunk and scroll the region so that hunk is in view; from the last, Next goes to the first, and Previous from the first goes to the last. A polite status line reads "Change 3 of 5" after each press. With reduced motion the scroll is a jump, not a glide.
Can a keyboard reach the diff?
Yes. The diff is in a labelled, focusable region that scrolls both ways, so the arrow keys, Page Up and Page Down scroll it once it has focus. Signs and line numbers are hidden from screen readers, and each changed row has a visually hidden "Added" or "Removed" before its text.
What does Copy patch copy?
The whole file's diff as a unified patch: two header lines, one hunk line with the correct counts and every row of the region. It announces "Copied" politely. The copy is real, but nothing is applied anywhere.
How does it fit on a phone and in a right-to-left layout?
The stepper sits under the header on a phone, and the region is a fixed height, so stepping never moves the page, and the diff scrolls inside it. In a right-to-left layout the header and frame mirror while the diff, which is code, stays left to right.