shadcn.io is not affiliated with official shadcn/ui
Storage Almost Full Notification Block for React Aria
A cloud drive's almost-full warning: a stacked bar of space by file type, a toggle group that lists each type's five biggest files as checkboxes, and a confirmed delete that shows how much it frees.
Installation
Overview
Help people clear space before a drive fills up with this storage warning for React with React Aria. It is Drivemoor, a cloud drive, in a hairline frame with plus marks at its corners. The first band stacks the used space by file type (Photos, Video, Documents, Other) in four foreground weights, each named in a legend with its size. The second band is a Toggle Group that picks a type and lists its five biggest files as Checkboxes with date and size; ticked files stay ticked when you switch type, and "Free up 3.2 GB" follows the ticks. Delete selected, the one Shine Button, opens an Alert Dialog that names the count and the size, and the bar and the type totals shrink when you confirm. For storage warnings, clean-up wizards and any quota you can reclaim.
FAQ
How do I use my own files?
Edit ITEMS (id, type, name, last change in UTC, size in GB, five per type), KINDS (the types, with rest, the space of that type not in the list) and CAPACITY. The segment widths, the totals, the percentage and "Free up" are worked out from them.
How are the segments told apart without colour?
Each type is a different weight of the foreground, from solid to a pale tint, and the legend names every one with its size in gigabytes. The bar has a text description with all four sizes for screen readers.
How does choosing files work?
The toggle group always has one type pressed (it never goes empty), and each file row is a checkbox in a label, so the whole row ticks it. The ticked files of every type count, which is why the status line says how many are ticked and how many gigabytes that frees.
What stays local, and how do I wire it for real?
Delete selected opens the dialog, and Delete removes the files from the lists in this page only: the bar, the totals and the lists update, and nothing is sent. With nothing ticked it answers "Tick at least one file first." In your app call your delete endpoint from confirm and drop the ids it reports as gone.