import { FileTree } from 'nextra/components'

# File Tree Component

A built-in component to visually represent a file tree.

## Example

Click the folder to test the dynamic functionality of the file tree.

<FileTree>
  <FileTree.Folder name="pages" defaultOpen>
    <FileTree.File name="_meta.js" />
    <FileTree.File name="contact.md" />
    <FileTree.File name="index.mdx" />
    <FileTree.Folder name="about">
      <FileTree.File name="_meta.js" />
      <FileTree.File name="legal.md" />
      <FileTree.File name="index.mdx" />
    </FileTree.Folder>
  </FileTree.Folder>
</FileTree>

## Usage

Create the file tree structure by nesting `<FileTree.Folder>` and
`<FileTree.File>` components within a `<FileTree>`. Name each file or folder
with the `name` attribute. Use `defaultOpen` to set the folder to open on load.

```mdx filename="MDX"
import { FileTree } from 'nextra/components'

<FileTree>
  <FileTree.Folder name="pages" defaultOpen>
    <FileTree.File name="_meta.js" />
    <FileTree.File name="contact.md" />
    <FileTree.File name="index.mdx" />
    <FileTree.Folder name="about">
      <FileTree.File name="_meta.js" />
      <FileTree.File name="legal.md" />
      <FileTree.File name="index.mdx" />
    </FileTree.Folder>
  </FileTree.Folder>
</FileTree>
```
