shadcn.io is not affiliated with official shadcn/ui
Change History Stepper Block for React Aria
A policy approval in five steps where each step keeps its versions, shown as a diff against the one before it, with who edited it and when, and a Restore this version button that makes the chosen one current.
Installation
Overview
See what changed in a step's text and take it back, with this change-history stepper for React with React Aria. A plus-marked frame holds a Steps rail at the start with the five steps of a remote work policy (Draft, Internal review, Legal review, Final approval and Published), each named for the text it holds. The open step's panel says who last edited it ("Edited by Saskia Brandt, 8 Sep"), offers a pill for every version, newest first, with a dot on the current one, and shows the chosen version with the catalog Diff Text against the version before it: removed lines struck through, added lines marked, unchanged lines plain. A line under it counts what changed. "Restore this version" is the block's one Shine Button: it makes the chosen version current and the attribution then reads who restored it. These are versions of one text, not a feed of events. For policies, contracts, documentation and listings.
FAQ
How is the diff worked out?
By diffLinesOf, a line-by-line comparison of two versions that finds the longest run of lines they share, then marks the rest as removed or added. It hands DiffText the -, + and space prefixes DiffText reads. The first version has nothing before it, so it is shown plain with a line saying so.
What does Restore this version do?
It sets the step's current version to the one you are viewing. The pill marks it with a dot, the line under the step title says "Restored v2 by Nell Adeyemi, 16 Sep", and the status line says "Legal review is now v2". Restoring the version that is already current does nothing but say so. The older versions stay, so you can restore again.
Which steps can I open?
The ones you have reached: the approval starts at Legal review, so Draft and Internal review are free to open, and Next step reaches Final approval and Published. Back is always free. Each step keeps its own chosen version and its own current one.
How does the keyboard work?
The rail is one tab stop on the current step: arrows move between the steps you have reached, and Enter opens one and moves focus to its heading. In the panel the version pills are a radio group, so one Tab stop and arrows between them, then the buttons.
What stays local, and how do I wire it?
The versions, the chosen ones and the current ones are all component state and are lost on reload; nothing is approved or published. To make it real, load each step's versions from your API, and call it from restore, which should create a new version rather than rewrite an old one.