Tree

Shows a file and folder structure. Click a folder to open or close it.

• docs
  • index.mdx
  • guides
    • quickstart.mdx
• writedocs.json

<Tree>
  <Tree.Folder name="docs" defaultOpen>
    <Tree.File name="index.mdx" />
    <Tree.Folder name="guides">
      <Tree.File name="quickstart.mdx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="writedocs.json" highlight />
</Tree>

From a Markdown list

A nested list works too, inside <Tree> or its other name <FileTree>. A name ending in /, or with items nested under it, is a folder, and folders with items start open. Leave a blank line after the opening tag and before the closing one:

• docs
  • index.mdx
• writedocs.json

<FileTree>

- docs/
  - index.mdx
- writedocs.json

</FileTree>

Highlight color

highlight marks a file or folder; a highlighted folder also colors everything inside it. The color is the page’s primary color, or set your own on the tree with style={{ "--tree-highlight": "rgb(59 130 246)" }}.

Keyboard

Up and Down move between visible items, Right opens a folder (or moves into it), Left closes it (or moves to its parent), Home and End jump to the first and last items, Enter and Space open or close a folder, * opens every folder next to the current one, and typing jumps to the next item whose name starts with those letters.

Tree.Folder props

Tree.File props