shadcn.io is not affiliated with official shadcn/ui
Storage Quota Exceeded Error Block for Ark UI
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 Ark 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 asChild around an a element. 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.