shadcn.io is not affiliated with official shadcn/ui
Storage Usage Dashboard Block for Vue
A duplicate finder with five groups of identical files, a radio list per group to choose the copy to keep, a bar of storage by category and a dialog that lists every copy that would be deleted.
Installation
Overview
Free space by deleting the extra copies of files, with this storage usage panel for Vue with Ark UI. A hairline frame with a plus mark on each corner opens with a one-line bar of the 48 GB in use by category (Documents, Media, Backups, Logs and Other), for context. Under it five groups of duplicate files each show the size, the number of copies and the places they live as a radio list, "Keep this one", with the first copy chosen. The header says how much the duplicates hold, the foot how much deleting the others frees, and a Shine Button opens a Dialog that lists every copy that leaves. Confirming marks the groups "Resolved in this demo" and shrinks the bar. It's built from Dialog, Badge, Button, Shine Button and Guides. For storage cleaners and drive managers.
FAQ
How do I fill it with my own files?
Edit GROUPS (the file name, the category, one copy's size in MB and the copies with their paths) and CATEGORIES (what is in use). What the duplicates hold, what deleting frees and the bar after it are worked out from those.
Which copy stays?
The one you choose in each group; the first is chosen to begin with. Choosing a different one changes the list in the dialog but not how much is freed, because every copy of a file is the same size.
What stays local, and how do I wire it for real?
Everything: nothing is deleted, the paths are made up and the categories are typed. To make it real, find duplicates by size and hash on the server, send the confirmed paths to a delete or move-to-trash call and reload the usage.