shadcn.io is not affiliated with official shadcn/ui
File Storage Dashboard Block for Ark UI
A segmented capacity bar of 500 GB by file type with a legend table, and a side list of the largest files with checkboxes: ticking adds an outlined ghost segment and a Free figure, a mixed select-all ticks them all, and Move to trash updates the bar.
Installation
Overview
See where your storage went and what deleting would free, with this file storage panel for React with Ark UI. A hairline frame with a plus mark on each corner holds one segmented bar of a 500 GB quota split into images, documents, video, audio, archives, code and fonts, a row of facts (quota, used, free, in trash) and a legend table with files, size and share. In a side cell at the end, the eight largest Stowbay files each have a Checkbox: ticking one draws an outlined ghost segment at the end of the used part of the bar and adds to a "Free if moved" figure, and a mixed checkbox in the cell's head ticks them all. "Move to trash" takes the ticked files out of their categories, leaving each row in place as "In trash" with a Restore button. It's built from Checkbox, Button and Guides. For storage consoles and cleanup tools.
FAQ
How do I fill it with my storage?
Edit CATEGORIES (a name, a file count, the size in GB and a tone) and ITEMS (the largest files, each with its category and size), and set QUOTA. The bar, the legend, the shares and the facts are worked out from them, and a trashed file is subtracted from its category's size and file count.
What is the outlined segment on the bar?
What the ticked files would free. It sits at the end of the used part, with a dashed outline and hatching, and the status line says what usage goes from and to ("86% to 83%"). Once files are moved to the trash the bar shrinks for real and the ghost is gone.
Is anything deleted?
No. Moving files only changes this page's state: the rows stay in place marked "In trash", the sizes come off the bar, and Restore puts a file back. A real version would move the files to a trash folder with a retention period before it frees anything.
How does the select-all checkbox behave?
It is unchecked with nothing ticked, mixed with some ticked and checked with all of them; pressing it ticks every file not in the trash, or clears them all when they are already ticked.