Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

Backup Created Success Block for React Aria

A full-height confirmation page for a database backup: fourteen day cells as a retention rack where each pick shows when its snapshot is deleted, a snapshot id and a restore command with copy buttons, a local Test a restore, and a real download of a small JSON manifest.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Close a backup with proof of what was kept and for how long, with this confirmation page for React with React Aria. It fills the screen: the page's two side rails run its full height, and one band crosses it between two rules with a plus mark where each meets a rail. In the centred column are a database mark in a muted tile, the heading and one sentence, then a framed card in three bands: the retention rack, fourteen day cells (the newest solid, the oldest hatched) that pick a snapshot with native radio buttons; the chosen snapshot's id and its deletion day with a Copy Button; and its restore command, also copyable. The foot has the Shine Button Test a restore and a Download Trigger that saves a manifest. For database backup, file backup and any snapshot that expires.

FAQ

What is real here, and what stays in the page?

Nothing was backed up or restored. The tables, their row counts and the size are typed sample data. What the browser really does is real: the copy buttons write to the clipboard, and Download manifest saves a small JSON file of the new backup, named a sample in its own note. To wire it, fill TABLES, SIZE_MB and RETENTION from your backup job, keep AS_OF to the day it ran, and replace the wait in test with a call that opens the snapshot.

How does the retention rack work?

There is one cell per day of the retention, 14 here, worked out from the day of the backup, so the newest is today's and the oldest is the one the next backup removes. Each cell is a native radio button named for its day and for when it is deleted (its day plus 14 days: 1 Oct goes on 15 Oct). Picking a cell, with a click or the arrow keys, rewrites the sentence under the rack, the snapshot id, the deletion day and the restore command, and the page keeps its height.

What does Test a restore do?

It runs for the chosen snapshot: the button says Testing… and keeps its size while it waits a moment, then a polite status line says that snapshot opened and the five tables were found, and that nothing was restored. It is local; connect it to a real dry-run restore.

What is in the downloaded manifest?

A small JSON file for the new backup: the database, the snapshot id, the day and time it was taken, the day it expires, the retention, the tables with their rows, the size and a note that it is a sample. It is built in the browser from the same typed data the page shows, and the status line says it was downloaded.

What do the copy buttons copy?

The chosen snapshot's id and its restore command, through the browser's clipboard; each says what it copies in its name and is announced when it works.

How does it look on a phone?

The rack wraps to two rows of seven, the foot with the two buttons is pinned to the bottom of the screen so Test a restore is always within reach, and the download button reads Download with its full name kept for assistive technology.

All 100 success blocks