Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Backup Config Onboarding Block for React Aria

A setup panel that starts from how much work you could lose: a four-stop slider sets the schedule, with a 14-day strip of backup ticks, a storage comparison against daily, retention and an auto-backup switch.

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

Let a new user set up backups by saying what they could afford to lose, not by writing a schedule, with this backup step for React with React Aria. It is a setup panel of Hoardwick, a document archive. A Slider over four stops (1 hour, 6 hours, 24 hours, 1 week) is the loss tolerance and works out the schedule in a sentence ("We'll back up every 6 hours (4 a day)"). A Segment Group keeps backups for 7, 30 or 90 days and a Switch turns automatic backups on or off. Beside them a framed figure draws the last 14 days as a strip of backup ticks and compares the storage with a daily backup in two bars. Save backups is the one Shine Button, with Discard beside it.

FAQ

How does the slider turn into a schedule?

Each stop carries its own interval and sentence in the file: 1 hour is every hour (24 a day), 6 hours is 4 a day, 24 hours is once a day and 1 week is once a week. The strip, the count in the figure's caption and the storage bars are all worked out from that one interval.

What does the strip show?

The last 14 days, 1 to 14 October, with one column per day and 24 hour slots in each, filled where a backup runs (the last one is Wednesday 14 October at 02:00). On a phone it shows the last 7 days. Turning the switch off dims every tick and the bars say nothing is scheduled. The drawing is hidden from assistive technology; its caption says how many backups the 14 days hold.

Are the storage multiples real?

They follow from the interval against a daily backup (24 a day is about 24 times, 4 a day about 4 times, once a week about a seventh) and are typed as words in the file. They do not account for how well your data compresses or deduplicates; in your app show your own measured figure.

How do Save and Discard behave?

Both are always there. With no change, Save says "No changes to save." and Discard says "Nothing to discard." With changes the foot counts them ("2 changes not saved yet."), Save keeps them in the page and Discard puts the saved state back.

How does it work with the keyboard?

The slider is one control: the arrow keys move between the four stops and its value is spoken as "Up to 6 hours". The retention options are a radio-style group with arrow keys, the switch is toggled with Space, and the status in the foot is one polite region.

What stays local in the demo, and how do I wire it?

Everything: nothing is backed up, the last backup time is typed, and Save only changes state. In your app save the interval, retention and switch on the workspace where save says so, and draw the strip from your real backup log.

All 100 onboarding blocks