shadcn.io is not affiliated with official shadcn/ui
Undo History Stepper Block for Solid
A five-step approval workflow where every move is listed in a history, with Undo and Redo buttons, Ctrl Z shortcuts and a new move that cuts the undone tail.
Installation
Overview
Let people step back out of a decision, with this undoable stepper for Solid with Ark UI. A hairline frame with plus marks has two cells. At the start, a Steps line of five numbered circles (Draft, Edit, Review, Approve and Publish) with a panel each, an Undo and a Redo button above it, and a foot with an outline Back and the block's one Shine Button. At the end, behind a divider, a scrolling history lists every move ("Move 3: Edit to Review") with the current one marked and the undone ones dimmed and tagged "undone". Undo and Redo walk the history, Ctrl Z and Ctrl Shift Z do the same while focus is inside the block (the Command key on Apple devices), and a new move after an undo cuts the tail. A polite line says what each move did. On a phone the history sits under the foot. For approvals, editors and any flow where a wrong turn should be cheap.
FAQ
How is the history kept?
As one list of moves and a count of how many are applied, held in a single state value. The current step is the last applied move's target, so Undo and Redo only change the count, and a new move keeps the applied part and drops the rest. Every change is a small pure function at the top of the file, which makes it easy to cap the length or to save it.
Which keys work, and where?
Ctrl Z undoes and Ctrl Shift Z redoes (Command on Apple devices, shown on the buttons after the page loads). The listener is attached to this block only, in the capture phase, so it never touches the rest of the page, and it works while focus is anywhere inside the block, including on the buttons.
Why do Undo and Redo not switch off?
When there is nothing to undo or redo they are marked disabled for assistive technology and dimmed, but stay focusable, so pressing the last Undo never throws focus away. Pressing one then says "Nothing to undo" in the polite line.
What stays local?
The history and the current step are component state, lost on reload, and nothing is published. To make it real, send each move to your server as an event and rebuild the list from the stored events on load.