Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Backup History Carousel Block for React Aria

Nine backup snapshots on a one-up track with a nine-step Slider scrubber whose ticks are dates, typed sizes with the change from the previous one, a Preview restore button and a Restore snapshot confirm.

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 someone find the right restore point by dragging, with this backup history carousel for React with React Aria. Snapholt, a backup service, shows its last nine nightly snapshots one to a slide: the id in mono, Full or Incremental, the size in large figures, the change from the previous snapshot of its kind ("+1.1 GB from the previous full"), the date, how long it took and a status word (Verified, Complete or Failed). Under the track a Slider of nine steps moves it, with the dates as tick labels and a taller tick for a full snapshot; swiping the track moves the thumb, and the thumb reads "Snapshot 8 of 9, Oct 11, full, 41.2 GB". The foot holds the status line, "Preview restore", which says nothing was restored, "Restore snapshot", which asks first in an Alert Dialog, and Previous and Next Buttons. A failed snapshot can be looked at but not restored. The ruled bands come from Guides. It's built from Carousel, Slider, Alert Dialog, Badge, Button and Guides, with CSS transitions only. The service, ids and sizes are made up for the example.

FAQ

How do I use my own snapshots?

Edit SNAPSHOTS: an id, an ISO date, a kind (full or incremental), a size in megabytes, a duration in seconds and a status. One formatter writes every size (1,000 MB is 1 GB), the change is computed against the nearest earlier snapshot of the same kind, and the slider's steps, ticks and thumb text come from the list's length.

How do the slider and the track stay together?

They share one page number: the thumb sets it, and so do a swipe on the track, the arrow keys and Previous and Next. The slider stays left-to-right in a right-to-left page, so earlier dates are always at the same end. Embla opens on the newest snapshot, and the thumb calls scrollTo; the slider value follows Embla's select event.

How does it work with a keyboard?

Tab reaches the slider, Preview restore, Restore snapshot, Previous and Next. On the slider, the arrow keys move one snapshot and Home and End go to the ends; with focus in the track, the arrow keys do the same. In the confirm dialog, focus starts on "Keep current data" and returns to Restore snapshot when it closes.

What is announced when it moves?

The status line is the one polite live region: it reads, for example, "Snapshot 8 of 9: Oct 11, Full, 41.2 GB", and after Preview restore or a confirmed restore it says what happened, in this demo. The slider's thumb reads the same facts as its value text.

What stays local in the demo?

Everything. Previewing and restoring only change the status line, and nothing is fetched or restored. To wire it for real, call your restore endpoint from confirm, show a progress state until it finishes, and load SNAPSHOTS from your API.

All 100 carousel blocks