shadcn.io is not affiliated with official shadcn/ui
Storage Quota Metric Banner Block for React Aria
A storage-quota banner for a cloud-storage service: a heading and an Upgrade button over a stacked bar split by type, with four legend cells on shared hairlines naming each type and its size.
Installation
Overview
A storage-quota banner for React with React Aria, for a plan with a size and a few things filling it. Bands between the page's solid rails hold a heading and a sentence with an outline Shine Button, "Upgrade", at the end; a stacked bar across the column, split by type in your theme's foreground tones; and, under a rule with + marks, four legend cells on shared hairlines that name each type and its size, the free space last. The sizes are typed once and the total, the share used and the free space are worked out from them. Nothing is past a limit, so no status colour appears. It's built from Guides and Shine Button, with your theme's tokens for every colour. For storage, bandwidth, seats and any allowance that is shared out between kinds of use.
FAQ
How do I change what is stored?
Edit PLAN_GB and TYPES at the top of the file. Each type has a label, a swatch class and its size in tenths of a gigabyte (41 is 4.1 GB), so the maths is whole numbers. The total used, the percentage in the heading, the free space and each segment's width are worked out from them. To add a type, add an entry and a fourth legend cell appears; the bar and the legend use the same swatch.
Why are the segments shades of one colour?
A set of hues would put four colours next to the page's one primary action. The three types are your theme's foreground at full, 60% and 30% strength, so they read in light and dark and in every preset, and the legend repeats each shade beside its label, with the free space as the muted track. The legend, not the colour, says which is which, so it reads the same in greyscale.
What should happen when the storage is nearly full?
Past a real limit, tint the used part with the warning token and put the fact in the heading ("Your storage is full"); the status colour is for that, not for an ordinary 84%. Keep the legend in the foreground tones so the sizes stay readable, and make the Upgrade button the Shine Button's default variant if it is the page's one call to action.
Is the bar read out to screen readers?
The bar is a picture, hidden from assistive technology. The heading and the sentence give the totals ("8.4 GB of 10 GB is in use, and 1.6 GB is left") and the legend is a description list, so a listener hears each type with its size. The sizes are in bdi elements so a right-to-left layout keeps the unit in order, and the bar itself is set left to right.