Documentation
Guide
Built-ins
FileTree

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.json
    • 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.json" />  <FileTree.File name="contact.md" />  <FileTree.File name="index.mdx" />  <FileTree.Folder name="about">  <FileTree.File name="_meta.json" />  <FileTree.File name="legal.md" />  <FileTree.File name="index.mdx" />  </FileTree.Folder>  </FileTree.Folder> </FileTree>
    StepsTwoslash Support