Files and folders with a list and grid view, type-colored icons, multi-select checkboxes and a selection toolbar that slides in.
npx shadcn@latest add https://hyperblur.dev/r/file-list.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/file-list.tsx.
import { FileList } from "@/components/hyperblur/file-list"
<FileList defaultView="grid" onDelete={(ids) => console.log(ids)} />| Prop | Type | Default | Description |
|---|---|---|---|
| files | { id: string; name: string; kind: FileKind; size?: string; modified: string }[] | defaultFiles | Items to show. kind is one of folder, image, doc, sheet, code, video, audio, archive or pdf. |
| title | string | "Documents" | Heading shown next to the item count. |
| view | "list" | "grid" | Controlled view mode. Pair with onViewChange. | |
| defaultView | "list" | "grid" | "list" | Initial view mode when uncontrolled. |
| onViewChange | (view: FileView) => void | Called when the view toggle changes. | |
| selected | string[] | Controlled list of selected file ids. Pair with onSelectionChange. | |
| defaultSelected | string[] | [] | Initially selected file ids when uncontrolled. |
| onSelectionChange | (ids: string[]) => void | Called whenever the selection changes. | |
| onDownload | (ids: string[]) => void | Called when Download is pressed in the selection toolbar. | |
| onDelete | (ids: string[]) => void | Called when Delete is pressed. The selected files are removed from the list. | |
| accent | string | "#2f7bff" | Accent color for checkboxes and the selected state. |