shadcn.io is not affiliated with official shadcn/ui
Storage Quota Expanded Success Block for Ark UI
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 Ark 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 asChild around an a element.