# File manager

> File browser with folders, grid / list views, search, stars and right-click actions.

Block · Pro · https://lodeui.com/blocks/file-manager

## When to use

- Document storage, asset libraries and attachments.

## When not to use

- Code repositories: use the tree view.

## Installation

```bash
npx shadcn@latest add @lode/file-manager
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FileManager } from "@/components/blocks/file-manager";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <FileManager />
    </main>
  );
}
```

Built from: Context menu, Progress

## API reference

### FileManager

A file browser with folders and breadcrumbs, grid and list views, search, stars, right-click actions and a storage meter. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between files |
| Enter | Open a folder or preview a file |
| Shift+F10 | Open the file's actions |

## Accessibility

- Each file is a focusable area named after the file, with a context menu.
- The view switch is a labelled radio group.

## Motion

- Files re-flow between grid and list; deleted files shrink away; the view pill slides.

## Responsive behavior

- Two grid columns on phones, up to four on desktop.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Load folder contents lazily when opened.

## Related

- [Context menu](https://lodeui.com/components/context-menu) — Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.
- [Tree view](https://lodeui.com/components/tree-view) — Folders and files with animated expand, indent guides and full tree keyboard support.
- [File dropzone](https://lodeui.com/components/file-dropzone) — Drag-and-drop upload with type, size and count checks and per-file progress.