Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Export Failed Error Block for Radix UI

A full-screen page for an export that hit its file-size limit: the share written worked out from typed numbers, a real partial CSV with quoting and a formula guard, and a plan that splits the rest by year, quarter or month into files under the limit.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show what got out, and how to get the rest, with this export failed page for React with Radix UI. It's the screen Ledgerhive, a CRM, shows when a contacts export stopped at its file-size limit: a whole screen with the page's rails and one band across it, split in two with a divider made by Guides. At the start, the heading "Your export stopped at 71%", a bar and the facts worked out from typed numbers (32,450 of 45,892 records written, 102 MB against the 100 MB limit, 13,442 still to go), and "Download the first 5 rows", a real CSV. At the end, a Toggle Group of By year, By quarter and By month lists the files the export would become, 3, 9 or 27, each with its records and size, and the Shine Button "Start export 1 of 3" queues them one press at a time. It's built from Toggle Group, Download Trigger, Shine Button, Button and Guides, with a CSS entrance only. For any product that exports a lot of data.

FAQ

Where do the figures come from?

From typed data: 27 monthly record counts (January 2024 to March 2026), a typed number of bytes per record and the typed 100 MB limit. The total, the share (71%), the records still to go, every file's records and every file's size are worked out from those, so the text and the table always agree. In your app, read the counts from your database and the limit from your export service.

How are the files split?

Each choice groups the same 27 months into files named for their date range: three years, nine quarters or twenty-seven months, with each file's records summed and its size taken from the records. The line above the table says how many files there are, the size of the largest, and whether every file is under the limit. Changing the choice starts the queue over.

Is the partial download a real file?

Yes. The first five rows are built into a CSV in the browser and handed to the browser's download by a Download Trigger. A cell with a comma or a quote is quoted ("Cole, Marsh and Pike", "The ""Flour"" Mill"), and a cell that starts with an equals sign, a plus, a minus or an at sign is prefixed with an apostrophe so a spreadsheet keeps it as text instead of running it as a formula. It is a sample, not your export, and the page says so.

What does Start export do?

Nothing is exported. Each press queues the next file in this demo and says which one, so a viewer can step through all of them; the table marks the queued ones in words as well as for screen readers. When every file is queued the button says so and stays on the page. Start over puts the demo back.

Is the table accessible?

It is a native table with a caption, column heads and a row head for each file, inside a named region that takes focus so the list scrolls with the keyboard. Its height is fixed, so changing from years to months changes the rows, never the page.

How does it look on a phone?

The heading, the bar and two facts come first, then the partial file, then the plan; the Start export button is pinned to the foot of the screen, with Start over as an icon beside it, and the table is shorter so the page stays compact.