File managerPro

• Grid and list views
• Breadcrumbs and search
• Right-click menu
• Storage meter

• Document storage, asset libraries and attachments.

• Code repositories: use the tree view.

Import it from @/components/blocks/file-manager after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { FileManager } from "@/components/blocks/file-manager";

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

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

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

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

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

• Load folder contents lazily when opened.