shadcn.io is not affiliated with official shadcn/ui
Storage Full Error Block for Vue
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 Vue with Ark 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.