A file browser with breadcrumbs, grid and list views, checkbox selection with a bulk action bar, a storage meter and a drag-over upload overlay.
npx shadcn@latest add https://hyperblur.dev/r/app-file-manager.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-file-manager.tsx.
import { AppFileManager } from "@/components/hyperblur/app-file-manager"
<AppFileManager onUpload={(files) => console.log(files)} />| Prop | Type | Default | Description |
|---|---|---|---|
| files | AppFile[] | sample folder | Files with id, name, kind (folder, image, doc, sheet, video, pdf, zip, audio), size in bytes or items for folders, modified and owner. |
| path | string[] | ["My files", "Marketing", "Q4 Launch"] | Breadcrumb segments. The last one is the current folder. |
| defaultView | "grid" | "list" | "grid" | View shown first. |
| defaultSelected | string[] | [] | File ids selected at mount. |
| usedBytes | number | 68.4 GB | Storage used before any uploads in this session. |
| totalBytes | number | 100 GB | Storage quota. |
| accent | string | "#2f7bff" | Color of the selection, focus rings and the drop overlay. |
| onUpload | (files: File[]) => void | Called with files dropped on the folder or picked with Upload. They also appear in the list. | |
| onDelete | (ids: string[]) => void | Called with the ids removed from the bulk bar or with the Delete key. | |
| onOpenFile | (file: AppFile) => void | Called when a file is opened by click in grid view, double click in list view or Enter. | |
| onPathSelect | (index: number) => void | Called when a breadcrumb segment is clicked. |