shadcn.io is not affiliated with official shadcn/ui
Diff Revision History Blog Block for Ark UI
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 Ark 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 a details object.