Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

Export Ready Success Block for Svelte

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 Svelte with Ark 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.

All 100 success blocks