shadcn.io is not affiliated with official shadcn/ui
Storage Quota Exceeded Error Block for React
A panel for a vault that is over its storage: one bar on a fixed axis with the trash and a hatched overshoot, a table whose states are worked out from the numbers, and a Shine Button that empties the trash and redraws everything.
Installation
Overview
Show what a full vault still lets people do, and one fix that works, with this storage quota exceeded panel for React with Base UI. It's the screen of Vaultnest, a file vault: a header over one framed panel, its corners and bands drawn by Guides. A meter band draws one bar on a fixed axis: the files, the trash in a lighter tone and a hatched stretch past the marked 10 GB limit, with the figures beside it in text ("10.4 GB of 10 GB", "0.4 GB over"). A native table says what works at that size: View and Download stay on, Upload and Sync are paused, each state a shape and a word worked out from the numbers. One Shine Button, Empty trash (1.2 GB), brings the vault to 9.2 GB; the bar, the table and the header redraw, and Undo refills the trash. Upgrade storage is an outline Button link. It's built from Button, Shine Button and Guides, with a CSS entrance only. For any product with a storage limit.
FAQ
Where do the states in the table come from?
From the numbers. Each feature is typed as always on or paused over the limit, and the page compares the vault's size with the limit: Upload and Sync are paused while it is over, and View and Download never are. The header, the bar, the figures and the table all read the same two values, so they can't disagree. Sizes are held in tenths of a gigabyte, so every figure is a whole number until it is printed.
Why does the bar keep the same scale when the trash is emptied?
Because a bar that rescales hides the change. The axis is fixed at 11 GB, so emptying the trash visibly takes away the lighter part and the hatched overshoot, and the limit tick stays where it was. The bar is a drawing, so it is hidden from screen readers; the same facts are in the text beside it and in a caption.
What does Empty trash do, and what stays in the page?
It redraws the numbers: nothing is deleted. The status line says "Uploads resumed, in this demo.", the button turns to a quiet Trash emptied (still on screen, so focus stays) and Undo refills the trash. To wire it for real, empty the trash through your storage API where the code says so, and recompute the sizes from its response.
Where does Upgrade storage go?
To #: point it at your plan or storage settings. It's a Button with render set to an a element and nativeButton={false}. It is an outline link, never a second filled button, so the one coloured control is the fix that works now.
Is the table accessible?
It is a native table with a caption, column headers and a row header for each feature, so a screen reader reads "Upload, Paused". Each state is a word and a shape, never a colour. The middle column describing each feature is dropped on a phone, with its sentence moved under the feature's name.
Related
- Pro
Usage Meters Billing
Plan and usageUsage meters for an app's settings: one row per quota with its count, a bar that turns to a warning tone at 80% and an over-limit tone past 100%, and a plain line on what happens next.
- Pro
Rate Limit Error
Blocked and limitedA full-screen 429 for an API key over its limit: a 10 by 10 grid of the last 60 seconds of requests, the Retry-After header worked out from the oldest, and a demo clock that empties the oldest cells so Retry works.
- Pro
File Too Large Error
Files and dataA full-screen 413 for a clip over the plan limit: a framed staircase of three plan limits with a marker for your file, four compression levels that move it and rewrite the verdict, and a real file picker that reads only name and size.
- Pro
Limit Reached Billing
Upsell and retentionThe upgrade prompt shown where someone hits a plan limit: what was blocked, the limit reached against the next plan's, a two-column comparison and Upgrade or Remind me later.
- Pro
Usage Limits Settings
Product controlsA row for each resource with a usage bar, a limit field, a policy for what happens at the limit (default, block, throttle or bill extra) and a sentence that restates the outcome, plus a default every row can follow.
- Pro
Seats Full Error
Plans and checkoutA panel for an invite that can't go out because every seat is taken: six seat cells, two inactive members to remove, and one button that reads Add seats until a seat is free and then Send the invite.