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 Markdown list works too, inside <Tree>. 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

<Tree>

- docs/
  - index.mdx
- writedocs.json

</Tree>

Highlighting

highlight marks a file or folder - the files a step changes, say. A highlighted folder colors everything inside it too. The color is the site’s primary color; set another on the tree with style:

• src
  • routes
    • payments.ts
    • refunds.ts
  • server.ts
• .env

<Tree style={{ "--tree-highlight": "rgb(234 88 12)" }}>
  <Tree.Folder name="src" defaultOpen>
    <Tree.Folder name="routes" defaultOpen highlight>
      <Tree.File name="payments.ts" />
      <Tree.File name="refunds.ts" />
    </Tree.Folder>
    <Tree.File name="server.ts" />
  </Tree.Folder>
  <Tree.File name=".env" highlight />
</Tree>

Folders that don’t close

openable={false} keeps a folder as defaultOpen sets it - open here, with no way to close it:

• config
  • production.json
  • staging.json

<Tree>
  <Tree.Folder name="config" defaultOpen openable={false}>
    <Tree.File name="production.json" />
    <Tree.File name="staging.json" />
  </Tree.Folder>
</Tree>

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