Files - Prisma — ContextQMD

import { Files, File, Folder } from "@prisma/eclipse";

Usage

Basic File Structure

The Files component displays file and folder hierarchies with an interactive tree structure.

tsx

import { Files, File, Folder } from "@prisma/eclipse";

export function FileTree() {
  return (
    <Files>
      <Folder name="app" defaultOpen>
        <File name="layout.tsx" />
        <File name="page.tsx" />
        <File name="globals.css" />
      </Folder>
      <Folder name="components">
        <File name="button.tsx" />
        <File name="tabs.tsx" />
      </Folder>
      <File name="package.json" />
    </Files>
  );
}

Live Example:

Nested Folders

You can nest folders to represent complex directory structures:

tsx

import { Files, File, Folder } from "@prisma/eclipse";

export function NestedStructure() {
  return (
    <Files>
      <Folder name="src" defaultOpen>
        <Folder name="components" defaultOpen>
          <File name="Button.tsx" />
          <File name="Input.tsx" />
        </Folder>
        <Folder name="utils">
          <File name="helpers.ts" />
          <File name="validators.ts" />
        </Folder>
        <File name="index.tsx" />
      </Folder>
      <File name="package.json" />
      <File name="tsconfig.json" />
    </Files>
  );
}

Live Example:

All Folders Collapsed

By default, folders are collapsed:

tsx

import { Files, File, Folder } from "@prisma/eclipse";

export function CollapsedFolders() {
  return (
    <Files>
      <Folder name="app">
        <File name="layout.tsx" />
        <File name="page.tsx" />
      </Folder>
      <Folder name="components">
        <File name="button.tsx" />
        <File name="tabs.tsx" />
      </Folder>
      <Folder name="lib">
        <File name="utils.ts" />
      </Folder>
    </Files>
  );
}

Live Example:

With Custom Icons

You can add custom icons to files:

tsx

import { Files, File, Folder } from "@prisma/eclipse";
import { FileIcon, FileTextIcon } from "lucide-react";

export function CustomIcons() {
  return (
    <Files>
      <File name="README.md" icon={<FileTextIcon />} />
      <File name="index.ts" icon={<FileIcon />} />
    </Files>
  );
}

Project Structure Example

A complete project structure:

tsx

import { Files, File, Folder } from "@prisma/eclipse";

export function ProjectStructure() {
  return (
    <Files>
      <Folder name="app" defaultOpen>
        <Folder name="api">
          <Folder name="users">
            <File name="route.ts" />
          </Folder>
        </Folder>
        <File name="layout.tsx" />
        <File name="page.tsx" />
      </Folder>
      <Folder name="components">
        <File name="Header.tsx" />
        <File name="Footer.tsx" />
      </Folder>
      <Folder name="lib">
        <File name="db.ts" />
        <File name="utils.ts" />
      </Folder>
      <File name=".env.local" />
      <File name="next.config.js" />
      <File name="package.json" />
    </Files>
  );
}

Live Example:

Disabled Folder

You can disable folders to prevent them from being opened:

tsx

import { Files, File, Folder } from "@prisma/eclipse";

export function DisabledFolder() {
  return (
    <Files>
      <Folder name="node_modules" disabled>
        <File name="..." />
      </Folder>
      <Folder name="src" defaultOpen>
        <File name="index.ts" />
      </Folder>
    </Files>
  );
}

Files Props

children - File and Folder components (ReactNode, required)
className - Additional CSS classes (optional)

File Props

name - Name of the file (string, required)
icon - Optional icon to display before the file name (ReactNode, optional)
className - Additional CSS classes (optional)

Folder Props

name - Name of the folder (string, required)
disabled - Whether the folder is disabled and cannot be opened/closed (boolean, default: false)
defaultOpen - Whether the folder is open by default (boolean, default: false)
children - Folder contents - File and Folder components (ReactNode, optional)
className - Additional CSS classes (optional)

Features

✅ Clean file tree visualization
✅ Collapsible folders
✅ Nested folder support
✅ Custom file icons
✅ Default open state for folders
✅ Disabled state for folders
✅ Eclipse design system styling
✅ Built on Fumadocs Files

Best Practices

Use defaultOpen on top-level folders to show important structure
Keep nesting depth to 3-4 levels for readability
Use descriptive file and folder names
Group related files in folders
Use custom icons sparingly to highlight special files
Consider using disabled folders for directories users shouldn't explore (like node_modules)
Order files logically (configuration files at root, source files in folders)

Common Use Cases

Next.js App Router Structure

tsx

<Files>
  <Folder name="app" defaultOpen>
    <Folder name="(auth)">
      <Folder name="login">
        <File name="page.tsx" />
      </Folder>
    </Folder>
    <File name="layout.tsx" />
    <File name="page.tsx" />
  </Folder>
</Files>

Monorepo Structure

tsx

<Files>
  <Folder name="packages" defaultOpen>
    <Folder name="ui">
      <File name="package.json" />
      <Folder name="src">
        <File name="index.ts" />
      </Folder>
    </Folder>
    <Folder name="api">
      <File name="package.json" />
      <Folder name="src">
        <File name="index.ts" />
      </Folder>
    </Folder>
  </Folder>
  <File name="package.json" />
  <File name="turbo.json" />
</Files>

Configuration Files

tsx

<Files>
  <File name=".env.local" />
  <File name=".eslintrc.json" />
  <File name=".gitignore" />
  <File name="next.config.js" />
  <File name="package.json" />
  <File name="tsconfig.json" />
</Files>