shadcn.io is not affiliated with official shadcn/ui
File Manager CRUD Block for React Aria
A team drive window with folders and live counts at the start and a table of files with checkboxes at the end, a selection band that renames one file, moves a selection to another folder or deletes it, and an Undo for each.
Installation
Overview
Let people act on a selection of files, with this file manager window for React with React Aria. It is a framed window of fixed height inside a hairline frame with a plus mark on each corner: a top bar with the title and the one Shine Button, New folder; at the start the folders with live counts (a select on a phone); at the end the chosen folder's files in a native table with a checkbox each, a select-all box that turns mixed while some are ticked, and the size and date in tabular figures. Ticking a row turns the toolbar above the table into a selection band of the same height: "3 selected", Rename (for one file only), a "Move to" Native Select of the other folders and Delete, which asks in an Alert Dialog. Moving updates both folders' counts at once. New folder opens a draft row with an Input, Enter creates it, Escape cancels, and a name must be filled and unique. There is no fixed action bar: the band is inline. Each move, rename and delete leaves an Undo in the foot and focus follows what changed. For team drives, asset libraries and any list you tidy in batches.
FAQ
How do I fill it with my files and folders?
Edit FOLDERS (an id and a name) and FILES (an id, a name, the folder id, ISO modified date and size in bytes). Counts, totals, the order (by name) and the empty state are all derived. New folders get their id from a counter in state.
Why does the toolbar change when I tick a file?
Because the actions belong to the selection. The folder's name and total share a band with "3 selected", Rename, Move to, Delete and Clear, and both are drawn in the same grid cell, so swapping them never changes the height; the one not shown is invisible and inert. Rename is aria-disabled unless exactly one file is ticked and says so in the polite line.
What happens when I move files?
They leave the folder you are in and join the one you chose, the counts of both folders change at once, the selection clears and the foot says "Moved 3 files to Contracts. Contracts has 8 files now." with an Undo. The select snaps back to "Move to…", so you can move the next batch the same way.
Does Delete ask first?
Yes, in an alert dialog that names how many files go and says that Undo in the foot brings them back. Cancel has first focus, the confirm is the destructive button, and focus lands on the file list afterwards. Undo restores the files to their folder.