Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

Export Ready Success Block for React

A full-height confirmation page for a finished export: a ring with the hours that remain of the link's 48, the file card, notebook, note and word counts, a real zip built in the browser to download and a link that really copies.

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

Hand over an export with a link that says how long it lasts, with this confirmation page for React with Base UI. 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 an archive mark in a muted tile, the heading and one sentence, then one framed object in four bands: a Circular Progress ring with the hours the link has to go and the day and time it expires; the file as an Attachment with its name, its number of files and its size; three counts (notebooks, notes and words); and the live line. The foot has the Shine Button Download archive, a Download Trigger that saves a real zip, and a Copy Button for the link. For data exports, report downloads and any file behind an expiring link.

FAQ

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

Nothing of yours was exported: the three notebooks and nine notes are typed sample notes, and the link goes nowhere. What the browser really does is real: Download archive saves a zip built in the tab, and Copy link writes the link to the clipboard. To wire it, replace NOTEBOOKS with your export (or pass your server's file as the data of the download trigger), set LINK, and give CREATED and LIFE_HOURS the moment the export was made and how long its link lasts.

What is inside the downloaded zip?

Five small files: a README that says the archive is a sample, an index.csv listing every note with its notebook and word count, and one Markdown file per notebook under a notebooks folder. It is a stored zip (the files are not compressed) written by hand in the page, with no library, so any unzip tool opens it. The size shown on the file card is the real size of those bytes, 2.1 KB.

How is the time to go worked out?

From two fixed moments, not the clock: the export was made at 08:10 UTC on 14 October, the page treats 09:10 UTC as now, and the link lasts 48 hours, so 47 hours remain and it expires at 08:10 UTC on Friday 16 October. The ring is filled by that share, and the numbers in it are text with the same words next to it. A link that really expires needs your server to enforce it; this page only shows the number.

What does Copy link do?

It copies the sample link to the clipboard and the live line says so, once. If the browser refuses (a page not served over HTTPS has no clipboard), the line says it could not copy and to select the link by hand.

How does it look on a phone?

The ring stays above the file card, the three counts stay in one row, and the two buttons are pinned to the bottom of the screen so Download archive is always within reach.

Is it usable with a keyboard and a screen reader?

Yes. Both buttons are real buttons with names, the ring is decoration with its numbers repeated as text, the expiry is a time element, and the one polite status line reports each action.

  • Pro

    Backup Created Success

    Backups and exports

    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.

  • Pro

    Data Import Success

    Backups and exports

    A confirmation panel for a finished CSV import: one bar split into imported, duplicate and failed rows by their counts, a scrolling ledger of the failed rows with the problem and what the file had, and a real CSV error report built from the typed rows.

  • Pro

    Export Data Dialog

    A usage-report tool's Exports page with its export dialog shown open: a CSV or JSON format, a range with row counts, six fields behind a mixed Select all box and a size estimate, and a Download button that saves a real file.

  • Pro

    Data Export Settings

    Backups and exports

    A data export panel built around a tree of what an account holds, where ticking a part adds what it depends on and says so, with a format control, the size, time and file count it adds up to, and a request list that queues one archive at a time.

  • Pro

    Asset Uploaded Success

    Saves and updates

    A confirmation panel for an uploaded picture: a greyscale drawing in a frame beside a table of the original and its three smaller copies, with sizes, how much smaller each is worked out from the byte counts and a button that copies each URL.

  • Pro

    Backup Restored Success

    Backups and exports

    A confirmation page for a restore from a snapshot: the snapshot and the live database side by side with the same five tables, their row counts and checksums, a Match worked out for every pair, the checksum of the whole snapshot with a copy button and a local health check.

All 100 success blocks