Files

A component for displaying file and folder structures in your documentation with collapsible folders.

Usage

Basic File Structure

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

import { Files, File, Folder } from "@prisma-docs/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:

layout.tsx

page.tsx

globals.css

package.json

Nested Folders

You can nest folders to represent complex directory structures:

import { Files, File, Folder } from "@prisma-docs/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:

Button.tsx

Input.tsx

index.tsx

package.json

tsconfig.json

All Folders Collapsed

By default, folders are collapsed:

import { Files, File, Folder } from "@prisma-docs/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:

import { Files, File, Folder } from "@prisma-docs/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:

import { Files, File, Folder } from "@prisma-docs/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:

layout.tsx

page.tsx

.env.local

next.config.js

package.json

Disabled Folder

You can disable folders to prevent them from being opened:

import { Files, File, Folder } from "@prisma-docs/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

<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

<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

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

Files

Usage

Files Props

File Props

Folder Props

Features

Best Practices

Common Use Cases

On this page