shadcn.io is not affiliated with official shadcn/ui
Storage Quota Exceeded Notification Block for Svelte
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 Svelte with Ark 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.