File Manager Grid: Free React + Tailwind Component

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).

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add file-manager-grid.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<FileManagerGrid/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/file-manager-grid.en.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

File Manager Grid