Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Storage Quota Manager Billing Block for React Aria

Four storage buckets, each with a Hot, Cool or Cold class and its monthly cost, a stacked bar of the 500 GB quota by class, the total against keeping everything Hot, and a save.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show what each file's speed costs, with this storage quota manager for React with React Aria. Inside a hairline frame with a plus mark on each corner, a stacked bar fills the account's 500 GB quota by storage class, in foreground weights with a legend that gives each class its GB and its cost, and a line says how much is still free. Four buckets of Cellarfox, a cloud backup (Recent uploads 38 GB, Backups 120 GB, Logs 64 GB, Archive 210 GB) each have a Native Select for the class, Hot at $0.12 a GB, Cool at $0.04 or Cold at $0.01 where restores take hours, and the month's cost for that bucket. Changing a class redraws the bar, the legend and the total: the month's storage, and what that saves against keeping everything Hot ($37.82 at the start). Putting Recent uploads on Cold adds a quiet note about restores. The action foot counts unsaved changes beside the only Shine Button, which saves them, and an outline Button to discard them. On a phone each bucket is a card. For backup, file-hosting and data products with tiered storage.

FAQ

How do I fill it with my own buckets and classes?

Edit BUCKETS (an id, a name, its size in GB and a note), TIERS (a class with its price in cents per GB and the text of its menu option), QUOTA and SAVED, the class each bucket has when the page opens. Costs are whole cents per GB times GB, so the bucket costs always add up to the total, and the saving is the all-Hot cost minus that total.

Why does Cold on Recent uploads show a note?

Because it is the one choice that is usually a mistake: the files you open every day take hours to restore from Cold. The note is quiet text in a slot that is always reserved, so it appears without moving anything, and it does not stop you from choosing it. The class menu names the restore time in every row as well.

How is the bar made, and is it accessible?

It is plain CSS: one piece per class whose width is that class's GB as a share of the quota, with a transition that is dropped under reduced motion. It is a drawing, hidden from screen readers, and the legend, the "432 of 500 GB" count and the free-space line carry the same facts in text.

What stays local, and how do I wire it for real?

Save keeps the classes in this page and says "Saved in this demo. Nothing moved." No file changes class. To make it real, send the bucket-to-class map from save to your storage service, load the sizes and current classes from it, and take the prices from your price list instead of the typed cents. Moving data between classes usually takes time, so show its progress after saving.

How are the class menus built?

They are native selects, named for their bucket ("Backups storage class"), so they use the device's own menu on a phone and the arrow keys or typing on a desktop. A change is read from the select's value and ignored if it isn't one of the three classes.

How does it look on a phone?

Each bucket becomes a card: its name and size, the class menu at full width and the month's cost beside a label. The bar and legend stack above, and the foot stays pinned to the bottom of the screen with Save and Discard side by side.

All 167 billing blocks