File Tree Component

A customizable file tree component for displaying hierarchical file structures in your documentation.

The File Tree component allows you to display hierarchical file structures in your documentation with collapsible folders and files.

Basic Usage

<Files>
  <Folder name="src">
    <File name="App.tsx" />
    <File name="index.tsx" />
    <Folder name="components">
      <File name="Button.tsx" />
      <File name="Card.tsx" />
    </Folder>
    <Folder name="pages">
      <File name="Home.tsx" />
      <File name="About.tsx" />
    </Folder>
  </Folder>
</Files>

Render As:

src
App.tsx
index.tsx
components
Button.tsx
Card.tsx
pages
Home.tsx
About.tsx

Props

Files

The root component that wraps the entire file tree.

Folder

PropTypeRequiredDescription
namestringYesThe name of the folder
childrenReactNodeNoChild elements (File or Folder)

File

PropTypeRequiredDescription
namestringYesThe name of the file

Examples

Nested Folder Structure

<Files>
  <Folder name="project-root">
    <File name="package.json" />
    <File name="tsconfig.json" />
    <Folder name="src">
      <File name="index.ts" />
      <Folder name="components">
        <File name="Button.tsx" />
        <File name="Card.tsx" />
      </Folder>
    </Folder>
  </Folder>
</Files>

Minimal Example

<Files>
  <Folder name="components">
    <File name="Button.tsx" />
    <File name="Input.tsx" />
  </Folder>
</Files>

Best Practices

  1. Keep the nesting level reasonable (recommended max 3-4 levels deep)
  2. Use clear and descriptive names for files and folders
  3. Consider the user experience when displaying large file structures
  4. Use consistent naming conventions throughout your file tree

Accessibility

The File Tree component includes built-in accessibility features:

  • Keyboard navigation support
  • ARIA attributes for screen readers
  • Focus management for interactive elements
  • High contrast mode support
Edit this page

Published on May 28, 2025