shadcn.io is not affiliated with official shadcn/ui
Settings Version Sheet Success Block for Ark UI
A thermostat settings page with the sheet that says what a save changed, shown open: three settings from old value to new, the version and its time, a Done button and a Revert to version 13 that redraws the page.
Installation
Overview
Say exactly what a save did with this confirmation sheet for React with Ark UI. It opens from the Hallway thermostat page of Dialwise, a thermostat app: the page's header holds an outline View changes Button, and the page itself is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, its slider, its 24-hour night strip and its away switch drawn from the saved values. The Sheet reads "Saved as version 14" over the three settings that changed, each as the old value, an arrow and the new one, the day and time the version was saved, a Shine Button Done and an outline Revert to version 13. Revert redraws the page with version 13's values, and the sheet then reads "Back on version 13" with Restore version 14. For settings pages, admin panels and any save that deserves a receipt.
FAQ
Why is the sheet already open, and what do I keep?
So you can see it without a click. On load the sheet is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. View changes opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SheetChanges component and share the block's state. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
What does Revert do, and how do I wire it?
Here it swaps the two typed versions: the page is redrawn from version 13's values, the sheet closes, focus returns to View changes and a polite status message says "Reverted to version 13 in this demo. Nothing was saved." Opening the sheet again shows "Back on version 13" with Restore version 14, which swaps them back. In your app call your API from revert to restore the older version as a new one, and build the two versions from its response.
How are the changes worked out?
By comparing the words each setting shows in the two versions: only the settings whose value differs are listed, and the count ("3 of 3") follows the list. To add a setting, add it to SETTINGS and to readOf, give both versions a value for it and draw it in SettingsDrawing.
Which side does the sheet come from?
From the end of the layout. The catalog's sheet sides are physical, so the block reads the page's direction when you open it and passes left in a right-to-left layout and right otherwise. The trigger is the View changes button wrapped in SheetTrigger with asChild, and the sheet is controlled with open and onOpenChange.
Is it accessible from the keyboard?
Yes. The real sheet is named by its title and described by its sentence, and focus stays inside until it closes; Escape, Done and the close button return focus to View changes. The copy shown on load moves no focus; Escape inside it, Done and its close button close it and put focus on View changes. One polite status message reports a revert or a restore.