shadcn.io is not affiliated with official shadcn/ui
Version Control Timeline Block for Ark UI
A document version history on a rail: seven saved versions with editors and summaries, a diff of the chosen version against the current one or the one before it, and a Restore that opens an alert dialog and appends a new version on top.
Installation
Overview
Compare any two versions of a document and restore one with this version history timeline for React with Ark UI. It is written for Draftkeep, a fictional documents app. A hairline frame holds a rail of seven versions, newest first, each a radio row with the number in mono, a name in weight for the two named versions, a one-line summary, the editor's initials and name and the day. Choosing a version fills the cell at the end with its text as a Diff Text, and a Native Select, Compare with, sets what it is drawn against: the current version or the version saved just before it; a line says how many lines were added and removed. Restore this version opens an Alert Dialog, Restoring v4 saves it as v8, and confirming appends v8 on top while every version stays. The current version has nothing to restore. The versions are example data.
FAQ
How do I change the versions?
Edit VERSIONS at the top of the file, oldest first. Each has a number n, an editor id, an ISO time, a one-line summary, an optional name and lines, an array of text lines. The diff is worked out by a small line comparison in the file, so there is nothing to keep in step.
What does restore do?
It saves the chosen version's lines as a new version with the next number, Restored from v4, and selects it. No version is changed or removed, which is why the dialog can say nothing is lost.
What stays local in the demo, and how do I wire it for real?
Which version is chosen, the compare setting and the restored versions are state in the page. To make it real, save the restored version through your API and append the version it returns; keep the confirmation dialog.