shadcn.io is not affiliated with official shadcn/ui
Storage Full Error Block for React
A full-screen page for a device that is out of room: a meter, a Check this browser button that reads the real storage estimate, and five steps for making room, with the shortcut as words for Mac or Windows.
Installation
Overview
Show people how to make room instead of leaving them with a failed save, with this storage full page for React with Base UI. It's the screen Sketchmark, an offline drawing app, shows when it can't save: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail, with a divider between two cells. At the start the heading and one sentence, a meter (a big figure, a bar and the numbers: the demo's 19.6 of 20 GB, 98%), an outline "Check this browser" button that reads the browser's real storage estimate, and a Switch that is a demo control, "Pretend this device is almost full", on when the page opens. At the end five steps for making room, as the read-only vertical Steps (a row of numbered markers on a phone), the Shine Button "Next step" with Back, and the current step's instruction, with its shortcut in Kbd caps chosen by a Segment Group. Nothing is ever cleared: the steps are done in the browser's own settings. For drawing, notes, maps and any offline-first app.
FAQ
What is real here, and what stays in the page?
Check this browser reads navigator.storage.estimate(), and it only reads: it shows this browser's own used and total bytes, or says the browser doesn't share them. The meter's 19.6 of 20 GB is typed (DEMO_USED, DEMO_QUOTA) and the percentage is worked out from it. Nothing is cleared, deleted or written; the steps are instructions for the visitor to carry out in their browser. In your app, replace the demo numbers with the estimate (or your own count of what you store) and offer your own "free up space" action for the data you control.
What does the Pretend this device is almost full switch do?
It is a demo control and it is on when the page opens. While it is on, the meter shows the demo's numbers; turn it off and the meter shows what your browser said at the last check (and the heading changes to say there is room, since most browsers have plenty). The line under the button always shows the browser's real numbers.
Is the browser's estimate exact?
No, and browsers say so: it is an approximation of what the site stores, and the quota is a share of the disk that browsers choose and can change. Some private windows report a small fixed quota. The block shows the numbers as the browser gives them, with "under 1%" for a share too small to round.
Will the five steps match my browser?
They describe the common route (Settings, Privacy and security, Clear browsing data, cached files only, confirm). The shortcut shown for step 3 works in Chrome, Edge and Firefox; Safari differs. Browsers move menu items between versions, so check the steps against the browsers you support and edit them. They ask for cached files only so a user's saved drawings stay.
Are the keys detected?
No. The Mac and Windows control is a visible choice, defaulting to Mac, and the shortcut is written as words (Command Shift Delete, or Ctrl Shift Delete) in key caps. It sits in step 3 only, so it never moves anything.
What changes on a phone?
The five markers become one row of numbers (their names are still read aloud), the current step's heading carries its name, and Next step and Back are pinned to the foot of the screen with a short status line, so the primary stays within reach while the meter and the steps scroll.
Related
- Pro
Storage Quota Exceeded Error
Files and dataA 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.
- 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
Browser Unsupported Error
Browser and deviceA full-screen update-your-browser page with five real feature checks in a table (ES modules, CSS grid, :has(), WebGL, structuredClone), a Switch to pretend, and the browsers that have all five.
- Pro
Cookies Disabled Error
Browser and deviceA full-screen page for a browser with cookies off: a check that reads the browser and writes nothing, what four essential cookies hold, and the steps for three browsers in an accordion.
- Pro
Offline Error
NetworkA full-screen offline page that listens to the browser's real online and offline events: a signal figure, a Check connection button, a Switch to pretend, and what stays available without a network.
- Pro
Camera Denied Error
Browser and deviceA full-screen page for a blocked camera and microphone: what the app can use, a Check again that reads the permission state, a drawn address bar with its popover, and the steps for three browsers in tabs.