shadcn.io is not affiliated with official shadcn/ui
Diff Revision History Blog Block for React
The revision history of one post: five revisions as a radio group at the start, and at the end a framed word-by-word diff of the lede with inserted and deleted marks for the chosen revision.
Installation
Overview
A revision history for React with Base UI, written for Stetwick, an editing-craft blog. A start-aligned header sits over a split behind a divider. At the start, five revisions, oldest first, as a RadioGroup of cells: who made each one (initials and name), when, and a line on what changed, with the newest chosen on load. At the end, a framed diff of the post's lede paragraph for the chosen revision: words it added are marked as inserted, words it dropped as deleted, with counts under the heading, an editor's note and a legend. The diff is worked out word by word from the typed texts, so the marks and the counts cannot disagree, and the first revision counts all of its words as new. It's built from RadioGroup, Field, Badge and Guides. The text is example text.
FAQ
Where does the diff come from?
From REVISIONS at the top of the file: each revision holds the full lede as it stood. The block compares a revision's words with the one before (a longest-common-subsequence match at module scope), merges neighbouring words of one kind into a phrase and draws each phrase as plain text, an ins or a del. Change a lede and the marks and the counts follow.
How are the changes shown without colour?
Inserted text is highlighted and underlined; deleted text is struck through and quieter. A legend under the text says so, and each marked phrase carries a hidden word ("Added:" or "Removed:") so a screen reader hears the change, not only sees it.
Does the page jump when I choose another revision?
No. Every revision's diff sits in the same grid cell and the unchosen ones are hidden and inert, so the frame is as tall as the longest and nothing below it moves. A polite status line reads the chosen revision and its counts.
How do the radio cells work?
The arrow keys move the choice, and Tab leaves the group. Each cell is a whole label: its radio, a named author and a time in a time element with a fixed value, shown in UTC.
The group takes value and onValueChange with the new value.
Related
- Pro
Notes From The Desk Changelog Blog
Story formatsThe publication's own changes written as posts: entries with a large version numeral and date at the start, grouped Added, Changed and Fixed lists, and Show earlier notes in a Collapsible.
- Pro
Drafts Desk Blog
Stats and draftsA drafts list for a writing-tools blog: each row has a status badge, a progress bar with its word count, the fixed time it was edited and a menu to edit, duplicate or archive it.
- Pro
Select Pair Comparison Blog
Story formatsTwo Selects pick two of five posts and the posts stand in two columns on a split divider, with Length, Level, Topics, Updated and Takeaway rows that line up and a line saying how many rows differ.
- Pro
Hover Card Footnotes Blog
Article partsAn annotated essay: numbered markers open a card with their note on hover and focus, jump to the note in an ordered list where the target note is tinted, and a link goes back to the exact place in the text.
- 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
Margin Note Editorial Blog
Featured storyThree editor's picks as split rows: the post with a numeral tile at the start and, in a tinted margin cell at the end, the editor's note with a hanging quote mark and a marked reason.