shadcn.io is not affiliated with official shadcn/ui
Edit History Comments Block for React Aria
One comment edited four times, with a word-level diff against the previous or the latest version, a list of versions, and Restore this version, which adds a new version at the top.
Installation
Overview
See what changed in an edited comment, with this edit history for React with React Aria. A compact header names the comment and holds Restore this version as the one primary. The first cell is a word-level diff of the chosen version against the one before it (or against the latest one, with a Segment Group to switch): inserted words are underlined and tinted, removed words are struck through, and each run says "Inserted" or "Removed" for screen readers, with a sentence that counts them. The versions sit in a list of native radios on the side, newest first; on a phone they become a Native Select above the diff. Restoring a version adds a new one at the top, "Restored from v2", with that version's text. It is built from Segment Group, Native Select, Shine Button and Guides, with a CSS entrance only. For editors, comment threads and any record that keeps its past wordings.
FAQ
How do I use my own versions?
Edit LINES, one line for each version: the author, when, an optional note and the text. The diff is worked out from the words of two versions with a longest-common-run table, so it needs no library. Words are split on spaces, so a changed comma shows as a changed word.
What do Previous and Latest compare?
Previous shows the version before the chosen one turning into the chosen one. Latest shows the chosen version turning into the latest one, so it answers "what happened since then". The first version has nothing before it, and the latest has nothing after it; the page says so instead of drawing an empty diff.
What does Restore this version do?
It adds a new version at the end with the chosen text and the note "Restored from v2", and selects it. The older versions stay, as they would in a real history. If the chosen version already matches the latest, it says so and adds nothing, and the demo stops at seven versions.
What stays local, and how do I make it real?
Everything; the versions live in the page and nothing is saved or sent. In a real app, store a row per edit (never overwrite), write the restore as a new edit and keep who restored it, and decide whether readers of the comment see the history or only its latest text.
Is it accessible?
The diff is text: changed runs carry a hidden "Inserted" or "Removed", and the underline and the strike-through back that up for sighted users. The versions are radios in a labelled group with arrow keys, and the select on a phone is native. A polite line speaks each choice. React Aria's segmented control follows the same names and keys; only its selection events differ in the code.