shadcn.io is not affiliated with official shadcn/ui
Download Failed Error Block for React Aria
A full-screen page for a download that stopped: three requirement cells with a free-space shortfall worked out from typed numbers, three mirrors as radio cells with their latencies, and a retry that fills a bounded bar and stops where the disk would fill.
Installation
Overview
Find out why a download stopped and retry from the right place, with this download failed page for React with React Aria. It's the screen Binhaven, a software download portal, shows when an installer would not finish: a whole screen with the page's rails and one band across it, a centred heading and one framed grid of cells on shared hairlines made with Guides. The first row is three requirements: free space (1.1 GB free against the 2.4 GB the file needs, so "Short by 1.3 GB", with a Native Select of what you could delete), the connection and whether downloads are allowed. The second row is three mirrors as native radio cells with their latencies, the nearest one marked. The Shine Button follows the mirror, "Retry from Frankfurt", and runs a bounded CSS fill. With room short the bar stops where the disk would fill and says so; with room enough it reaches the end and says it was simulated. It's built from Native Select, Shine Button, Badge, Button and Guides, with a CSS entrance only. For any product that serves large files.
FAQ
Where does Short by 1.3 GB come from?
From two typed numbers: the file's size (2,400 MB) and the space the disk has (1,100 MB). The shortfall, the word beside it, the percentage the first attempt reached and the bar's stopping point are all worked out from those numbers by small pure helpers, so changing either one changes the page. A real page would read the free space from the operating system, which a browser can't do, or from your desktop app.
What does the delete select do?
It adds what you say you could delete (nothing, 0.9 GB of old downloads, 1.6 GB of trash) to the free space and recomputes everything: with old downloads gone it is still short by 0.4 GB, with the trash emptied it has 0.3 GB to spare and the retry can finish. Nothing is deleted; the choice only moves the numbers.
What does the retry do?
Nothing is requested and nothing is saved. A press runs a bar from empty to its stopping point in under two seconds (at once when you prefer reduced motion) and then says what happened in a polite status line, ending "Simulated; nothing was saved." The button stays pressable while it runs but ignores the press, so nobody is stranded by a disabled control. In your app, start the download from the retry handler and move the bar from real progress events.
How are the mirrors chosen?
They are three native radio buttons in labelled cells, so the arrow keys, the label click and a screen reader all work with no script. The latencies are typed samples and the nearest one is the lowest of them. The connection cell repeats the chosen mirror's latency, and the button's label follows the choice.
Why check space, connection and permission first?
They are the three things a download usually dies of, and a page that names them turns a vague failure into a short checklist. Connection and permission are typed as fine here, so the one thing to fix is the space; a real page would test each one and show the same cells.