shadcn.io is not affiliated with official shadcn/ui
Storage Quota Expanded Success Block for React
A confirmation panel for a raised storage limit: a capacity ruler from 0 to 2 TB with the space used, the old limit and the space added, three figures worked out from the same numbers and a forecast of when the free space runs out at a growth rate you pick.
Installation
Overview
Show a bigger limit as a place on a ruler, and how long it will last, with this confirmation panel for React with Base UI. It is the panel Silverfile, cloud storage, shows once a team's limit has gone from 1.5 TB to 2 TB: a header with one action, the Shine Button that opens the analytics, over one framed card in three bands. The first is a capacity ruler: the space used as a solid bar, the old limit as a tick and the space the upgrade added hatched. The second is three figures (used, free, added). The third is the forecast: a Toggle Group of three growth rates and one live line with the month the free space would run out. For storage, seats, quotas and any limit that was raised.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was expanded and nothing was measured. The 1,390 GB used, the two limits and the three growth rates (60, 120 and 180 GB a month) are typed sample data. To wire it, fill USED, OLD_LIMIT and NEW_LIMIT from your billing system, set AS_OF to the day you measured, and give GROWTHS your own recent monthly growth, or one measured from your usage history.
How do I read the ruler?
The ruler runs from 0 to 2 TB. The solid bar is the 1,390 GB used, the tick marks the old 1.5 TB limit, and the hatched part after it is the 500 GB the upgrade added; the ruler ends at the new limit. Every length is worked out from the typed numbers, the scale is written under it, and the ruler carries one sentence with the numbers for a screen reader.
How is the forecast worked out?
The free space (2,000 less 1,390, so 610 GB) is divided by the monthly growth, and that many months are counted from a fixed day, 14 October 2026, not the clock. At 120 GB a month it lasts about 5 months and fills by about Mar 2027; at 60 it is about 10 months (Aug 2027) and at 180 about 3 months (Jan 2027). The rates are examples the page says are typed, and growth is rarely constant, so treat the month as a guide.
How does the growth group work?
It is one group with one rate always chosen, so the arrow keys move between 60, 120 and 180 GB a month. Changing it rewrites the forecast's month and sentence, which are one polite status line, and the card keeps its height because the line has a reserved space.
How does it look on a phone?
The ruler keeps its labels, the three figures stay in one row, and the growth group wraps under its caption.
Where does the link go?
View analytics is the Shine Button in the header: a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.
Related
- Pro
Storage Optimized Success
Servers and storageA confirmation panel for a compaction: three cells on shared hairlines, one table each, with the size before as a hollow bar, the size after solid and the reclaimed part hatched, worked out from typed sizes, and a toggle group that sorts the tables.
- Pro
License Activation Success
Plans and limitsA license confirmation inside an account panel: the plan with its key masked and a button that copies it, the date it runs to, seats in use against seats bought, and a table of what the license includes.
- Pro
Asset Uploaded Success
Saves and updatesA confirmation panel for an uploaded picture: a greyscale drawing in a frame beside a table of the original and its three smaller copies, with sizes, how much smaller each is worked out from the byte counts and a button that copies each URL.
- Pro
Backup Created Success
Backups and exportsA full-height confirmation page for a database backup: fourteen day cells as a retention rack where each pick shows when its snapshot is deleted, a snapshot id and a restore command with copy buttons, a local Test a restore, and a real download of a small JSON manifest.
- Pro
Rate Limit Increase Success
Plans and limitsA confirmation panel for a raised API limit: a group of buttons for all regions, EU and US, one derived sentence with a before-and-now meter, three endpoints with the same paired bars and their limits in words, the burst bucket, and a local benchmark.
- Pro
Cluster Scaled Success
Servers and storageA confirmation window for a scaled cluster: twelve node slots in a framed canvas that a number field redraws, an Autoscale switch that dashes the room to grow, and the vCPU, memory, requests and monthly cost worked out from typed per-node figures.