shadcn.io is not affiliated with official shadcn/ui
Backup and Restore Settings Block for Ark UI
A backups page with a list of six snapshots and the three-step restore that opens from it, shown open on load: choose what to bring back, read the impact and type the snapshot date to confirm, then watch a progress bar fill and end on a plain statement that nothing was restored in the demo.
Installation
Overview
Make a restore something people understand before they press it, with this backup and restore page for React with Ark UI. The block is the dialog open over the page it opens from: a list of six snapshots of a database, each with its date, whether it was scheduled or taken by hand and its size, and above it the header with a button that opens the restore. The restore is an Alert Dialog because it is destructive, so it has no outside-click close and focus starts on Cancel. Step one asks what to bring back, with a Checkbox for the database, the uploaded files and the settings. Step two writes the impact in a Data List: how many rows and files changed since the snapshot are replaced, how many newer snapshots stay, how long it takes with writes paused, all worked out from the snapshot and the parts you chose, then asks for the snapshot's date to be typed exactly before the destructive button comes alive. Step three runs the restore as a Progress bar that fills with a CSS transition, and ends on "Restored in this demo. Nothing was replaced." The list marks the snapshot, so closing the dialog shows what happened. It's built from Alert Dialog, Checkbox, Data List, Progress, Input, Badge, Button and Guides, with a CSS entrance and fill only. For databases, file storage and any product where a restore overwrites live data.
FAQ
How do I fill it with my own snapshots?
Edit SNAPSHOTS, newest first: each has an id, an ISO day and a time, whether it is Scheduled or Manual, its size in gigabytes by part (gb), the rows and files changed since it was taken, which is what a restore would replace. SCOPES lists the parts that can be restored and SPEED is how many gigabytes a minute a restore runs, which sets the time. The impact lines, the sizes and the confirmation word (the snapshot's date) are all computed from these.
Why is the dialog already open, and which part is the preview's?
So the page shows what a restore asks of you. On load the dialog is drawn in place, a non-modal element over the list, which is inert under it, so nothing is trapped or focused on the docs page. The header's button opens the real alert dialog, with its focus trap, Escape and focus return, and the in-place copy stays closed until a reload. Both share one body and one state. In your app keep the Alert Dialog and drop the in-place copy.
How does the typed confirmation work?
The destructive button is marked aria-disabled until the snapshot's date is typed exactly, with its dashes, and says "Matches." under the field as you reach it. Pressing it early moves focus back to the field. The date, not a word like "restore", is what you type because it is the one thing that tells two snapshots apart, so a restore from the wrong row can't be confirmed by habit. Back returns to the first step with focus on the forward button.
How does the progress bar work without a timer?
The bar starts at empty on the frame the step opens and is set to full on the next one, so the browser fills it with the Progress component's own CSS transition (set to 2.4 seconds here). The restore is done when that transition ends, and the line under the bar says so. Under reduced motion there is no transition, so the last step shows its end state at once. Closing the dialog during the fill cancels it, since the run is only a simulation.
What stays local, and how do I make it real?
Everything. Nothing is restored, replaced or paused, and the run only fills a bar; the list marks "Restore simulated" on the snapshot and the status line says nothing was replaced. To make it real, start the restore on your server from the confirm handler, show its real progress in the bar, and replace the typed numbers with the impact your backend computes before it asks. Keep the typed confirmation: a restore throws away newer data.
How does it look on a phone?
The in-place dialog docks to the bottom of the stage and its body scrolls while the buttons stay in view, the list shows the date, the type and the size under it in a smaller line, and the real dialog keeps the catalog's phone layout. The footer stacks with the forward button on top.