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.

- _meta.js
- contact.md
- index.mdx

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

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>

Cards Steps