File Manager Grid

A file/folder grid with marquee multi-select, a right-click menu, and view switching.

A grid panel that mimics a desktop file manager: file cards are colored by extension, and it supports single-click selection, cmd/ctrl multi-select, dragging a marquee rectangle in empty space, right-clicking to open a custom action menu, and switching between grid and list views (items reflow smoothly with layout animations).

Loading preview…

npx shadcn@latest add https://webberui.com/r/file-manager-grid.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Initial view modedefaultView

Container widthclassName

<FileManagerGrid />

Installation

npx shadcn@latest add https://webberui.com/r/file-manager-grid.json

Or, once registries are configured in components.json, install it as @webberui/file-manager-grid.

Usage

import { FileManagerGrid, type FileItem } from "@/components/ui/file-manager-grid";

const files: FileItem[] = [
  { id: "1", name: "Design files", kind: "folder" },
  { id: "2", name: "Proposal deck.pdf", kind: "pdf", size: "4.2 MB", modified: "Today 11:03" },
];

<FileManagerGrid
  files={files}
  onOpen={(file) => console.log("open", file.name)}
  onSelectionChange={(ids) => console.log("selected", ids)}
/>

Props

Prop	Type	Default	Description
`files`	`FileItem[]`	—	The list of files and folders to display
`defaultView`	`"grid" \| "list"`	`"grid"`	Initial view mode
`onSelectionChange`	`(ids: string[]) => void`	—	Callback when the selection set changes
`onOpen`	`(file: FileItem) => void`	—	Callback on double-clicking an item or choosing "open" from the right-click menu
`onDelete`	`(file: FileItem) => void`	—	Callback on choosing "move to trash" from the right-click menu
`className`	`string`	—	Forwarded to the outermost container

FileItem fields:

Field	Type	Default	Description
`id`	`string`	—	Unique identifier, used as the key for selection state
`name`	`string`	—	File or folder name
`kind`	`"folder" \| "doc" \| "pdf" \| "img" \| "sheet" \| "video" \| "zip"`	—	File kind, which determines the icon color scheme and the extension tag
`size`	`string`	—	Display string for the file size (for example `"2.4 MB"`)
`modified`	`string`	—	Last modified time, shown on the right in list view

Accessibility

The file area uses role="listbox" marked aria-multiselectable, and each item is a role="option" reporting aria-selected live
Items are keyboard focusable (tabIndex={0} plus a focus ring), Enter / Space toggle selection, and Escape clears the selection and closes the right-click menu
The toolbar's item and selection counts are announced with aria-live="polite", and the view-switch buttons carry aria-pressed and Chinese aria-labels
When the user has "reduce motion" enabled at the system level, the view-switch reflow, the selection badge, and the menu animations all complete instantly