shadcn.io is not affiliated with official shadcn/ui
Storage Quota Exceeded Notification Block for React
A cloud storage service's over-the-limit notice with a bar that overshoots a marked limit and a slider that works out the new limit, the monthly cost and whether the usage then fits.
Installation
Overview
Let people fix a passed limit in one place with this storage quota notice for React with Base UI. It is Attichost, a cloud storage service, in a hairline frame with plus marks at its corners. The first band draws 112 GB of a 100 GB plan as a bar that overshoots a marked limit: the part inside the limit is solid, the part over it is striped, and a heavy tick names the limit. The second band is the overage calculator: a Slider adds storage from 0 to 200 GB in steps of 10, and a Data List shows the new limit, the added monthly cost and whether the bar now fits ("Fits, with 8 GB to spare" or "Still 2 GB over the limit"). Add 20 GB is the one Shine Button, and Delete files points at the file list. A status line says what happened. For quota notices, limit pages and any plan that charges by the gigabyte.
FAQ
How do I use my own numbers?
Edit USED and PLAN_LIMIT (GB), CENTS_PER_GB (the price of an extra gigabyte per month, in cents), and the slider's MAX_ADD and STEP. The bar's scale, the striped overage, the new limit, the cost and the verdict are all worked out from them, so nothing else needs changing.
How is the overage told apart without colour?
The part of the bar inside the limit is solid foreground, the part over it is striped, and the limit is a heavy tick with its own label. The same facts are in words: "112 GB of 100 GB", the verdict "Still 12 GB over the limit", and the bar has a text description for screen readers.
How does the slider work?
It is a catalog Slider from 0 to 200 in steps of 10, labelled "Extra storage", and it speaks its value ("20 GB more storage"). Arrow keys move it by one step, Home and End jump to the ends, and every move re-works the bar, the new limit and the cost at once.
What stays local, and how do I wire it for real?
Add 20 GB sets the limit to the new value in this page and says "Nothing was charged"; with 0 GB chosen it answers "Pick an amount to add first." instead. Delete files only says it would open the file list. In your app call your billing endpoint from buy and take the new limit from its response, and link Delete files to your file manager.
Related
- Pro
A cloud drive's almost-full warning: a stacked bar of space by file type, a toggle group that lists each type's five biggest files as checkboxes, and a confirmed delete that shows how much it frees.
- 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 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
Storage Full Error
Browser and deviceA 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.
- 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
A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.