shadcn.io is not affiliated with official shadcn/ui
Diff Viewer Changelog Block for React
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 Base 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.
Related
- Pro
Code Diff Changelog
Code and commitsA diffstat header with a drawn five-square glyph and a chip per file, over a framed code window that plays one function's change once and a Copy patch button.
- Pro
Config Changes Ledger Changelog
Data and configA change ledger of settings with the old value struck through and the new one after an arrow, an environment Select, and a Copy button for each row's rollback command.
- ≠≠Pro
Environment Config Diff Changelog
Data and configA staging against production table in a fixed-height scroll region with grouped settings, masked secrets, a result as a shape and a word, and a Mismatches only switch.
- Pro
Schema Diff Changelog
Data and configA migration viewer: a Select of three migrations and an Unified or Split toggle draw the columns that were added, changed or removed as a diff table with signs and words.
- $Pro
Breaking Changes Changelog
APIs and integrationsA framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.
- Pro
Commit Log Changelog
Code and commitsA git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.