Storage Usage Panel
A storage quota panel with a used versus quota headline, a segmented usage bar by type, per type breakdown rows, and a trash reclaim row.
A storage quota panel with a used versus quota headline, a segmented usage bar by type, per type breakdown rows, and a trash reclaim row.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Storage Usage Panel is the quota surface for a media library settings page: a header with a HardDrive icon, a Storage title, and a Manage plan button, then a large 38.2 GB of 50 GB used headline. Below it a segmented bar splits the used space by media type, and a ruled breakdown lists Images, Videos, Documents, and Other, each with a color swatch, file count, size, and percent share. A trash reclaim row notes that deleted files count toward the quota for 30 days and offers an Empty trash action.
Segments are one array with label, file count, size, percent, and a foreground-opacity swatch that colors both the bar and the breakdown dots. The bar widths scale each percent so the four segments fill the used portion of the track.
Reach for this block on a workspace or account settings page where storage is metered, wired to your usage API. Surface it near the plan controls so a user who is near the ceiling can upgrade or clear the trash in one place.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the media storage meter. Other quota views:
Tip: keep the trash reclaim row visible; a user near the ceiling often has gigabytes to recover before they need a bigger plan.