Blocks
Files - Storage
Storage blocks: a usage meter with a segmented bar, a breakdown by file type with a size or file count switch, a plan upgrade prompt with a monthly and yearly price toggle and quota warning banners that change at 80, 90 and 100 percent.
These blocks show how much space is used and what to do about it. They take typed props, like total, segments and plans, with fictional numbers, and the segmented bar has a text alternative so the same information is available without color.
The quota warning block includes a slider that previews each state. It is only there for the demo, so remove it and pass the real usage in. The upgrade buttons show a toast, so connect them to your billing flow.
Style One
Usage meter with a segmented bar split by file type, a legend and manage and upgrade buttons.
Style Two
Breakdown by type with a bar for each kind of file and a switch between size and file count.
Style Three
Upgrade prompt with plan cards, a monthly and yearly switch that changes the price and an upgrade button.
Style Four
Quota warning banners for 80, 90 and 100 percent, with a dismiss button for the lower levels and uploads that pause when the storage is full.
Files - Sharing
File sharing blocks: a share dialog that invites people and sets roles, an access list with pending invitations and undo, public link settings with a password and an expiry and a file detail panel with tabs, tags and actions.
Files - Uploads
Upload blocks: a dropzone with file validation, multi file progress with pause and cancel, an avatar upload with preview, an image grid with a cover image, an upload dialog with an import from link tab and a failed uploads list with retry.