shadcn.io is not affiliated with official shadcn/ui
Grid View File Upload Block for React
A drive window with a folder rail, a Grid or List switch, selectable tiles with drawn type thumbnails and a menu to rename, download, share or delete, and a drop target that adds tiles.
Installation
Overview
Browse a drive the way people browse photos, with this file grid window for React with Base UI. It is the drive of Gridhouse, a photo agency: a folder rail at the start (a select on a phone) and a grid of tiles with a Grid or List switch in a Toggle Group. Each tile has a thumbnail drawn from a few shapes to suit its type, a checkbox, and a Dropdown Menu with Rename, Download, Share and Delete that opens from the "..." button and from a right-click or the Menu key on the tile. Rename edits the caption in place; Delete removes the tile and the foot says "Removed" with Undo; Download and Share say they are not in this demo. Files dropped on the grid, or added with Upload from File Upload, become tiles in the open folder. The window has a fixed height and only the grid scrolls. The window is framed by Guides. For photo libraries, asset managers and any drive with a visual file list.
FAQ
How do I open a tile's menu?
Press its "..." button, right-click the tile, or focus the tile and press the Menu key or Shift and F10. All three open the same menu next to the "..." button. The menu has Rename, Download, Share and Delete; Escape closes it and focus returns to the button.
How does rename work?
It swaps the caption for a field in the same space. Enter keeps the new name, Escape cancels, and an empty name puts the old one back, with a status line for each. The tile does not change height.
Is Delete real, and can I undo it?
It removes the tile from this tab only. The foot says how many files were removed and shows Undo, which brings them back; the delete button above the grid removes every ticked tile at once. Focus moves to the next tile's menu button.
What do Grid and List show?
The same files and the same selection. Grid is tiles with a large thumbnail; List is one row per file with a small thumbnail and the type. Switching keeps what is ticked and says which view is showing.
What changes on a phone?
The folder rail becomes a select above the grid, the tiles go two across, and checkboxes, menu buttons and view items are at least 44 px. The right-click is replaced by the "..." button, which is always visible.
What stays local, and how do I wire it?
The 24 files are typed at the top of the file and everything else changes state in the tab; no file is read, shared or downloaded. To use a real drive, load tiles per folder, send rename, delete and share to your API from act, and send dropped files to your upload route.