File Manager Block React component
A file manager with breadcrumb folders, a grid and list view, a storage bar split by file type, drag and drop uploads with progress, inline rename and delete with undo.
About the File Manager Block component
File Manager Block is a small cloud drive in one card. Folders open with a click and the breadcrumb at the top takes you back up, while a toggle switches between big tiles and a sortable list with dates and sizes.
A storage bar shows how much of the quota is used and splits it into video, images, documents and other files. Drag files onto the card to upload them into the open folder with a live progress bar, rename anything inline, and delete with a six second Undo in case it was a mistake.
When to use it
Use it for a document area in a SaaS app, a client portal, an asset library or an admin page for user uploads.
Pass onUpload to send files to your storage; leave it out for demos and the uploads are simulated.
Installation
Add the File Manager Block component to your project with the shadcn CLI. It lands in components/file-manager.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/file-managerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<FileManager /> accepts 10 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Files" |
| items | { id: string; name: string; parentId: string | null; folder?: boolean; size?: number; modified: string }[] | — |
| quota Storage quota in bytes. Defaults to 15 GB. | number | 15 * GB |
| today Today as YYYY-MM-DD, used as the modified date of uploads. | string | "2026-11-01" |
| view | "grid" | "list" | "grid" |
| onUpload Upload a file. Call progress(0–100) as it goes; resolve when done. Without it, uploads are simulated. | (file: File, folderId: string | null, progress: (pct: number) => void) => Promise<void> | — |
| onRename | (id: string, name: string) => void | — |
| onDelete Called once the undo window has passed. | (ids: string[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Files"
- items{ id: string; name: string; parentId: string | null; folder?: boolean; size?: number; modified: string }[]
- quota
Storage quota in bytes. Defaults to 15 GB.
numberDefault: 15 * GB - today
Today as YYYY-MM-DD, used as the modified date of uploads.
stringDefault: "2026-11-01" - view"grid" | "list"Default: "grid"
- onUpload
Upload a file. Call progress(0–100) as it goes; resolve when done. Without it, uploads are simulated.
(file: File, folderId: string | null, progress: (pct: number) => void) => Promise<void> - onRename(id: string, name: string) => void
- onDelete
Called once the undo window has passed.
(ids: string[]) => void - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
File Manager Block FAQ
- How do folders work?
- Items are a flat list. A folder has folder: true and its children point to it with parentId; root items use null. Folder sizes and item counts are worked out from the children.
- How do I report real upload progress?
- onUpload gets the File, the target folder id and a progress function. Call progress with 0 to 100 as bytes go up, for example from XMLHttpRequest upload events, and resolve the promise when the upload is done. A rejected promise removes the row.
- When is onDelete called?
- Only after the six second undo window ends, or when another delete starts. If the user presses Undo, nothing is deleted and onDelete is never called.
- How does rename handle extensions?
- The input preselects the name without its extension, so typing replaces just the name. Empty names and names that already exist in the same folder are ignored.
- Is it accessible?
- The breadcrumb is a nav with aria-current, the view switch is a radiogroup, every icon button has a label such as 'Delete moodboard.png', uploads are progressbars, F2 starts renaming a focused folder and the Undo toast is announced.
