FileTree

Usage

<FileTree> renders a directory listing as a clickable tree. Folders toggle open/closed; files are leaves.

<FileTree>
  <Folder name="src" defaultOpen>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="card.tsx" />
      <File name="callout.tsx" />
    </Folder>
    <Folder name="lib">
      <File name="utils.ts" />
      <File name="config.ts" />
    </Folder>
    <File name="index.ts" />
  </Folder>
  <File name="package.json" />
  <File name="tsconfig.json" />
</FileTree>

Default open

Pass defaultOpen to a <Folder> to expand it on first render. Useful for the most relevant folder in a large tree:

<FileTree>
  <Folder name="docs" defaultOpen>
    <File name="introduction.mdx" />
    <File name="quickstart.mdx" />
  </Folder>
  <Folder name="src">
    <File name="...lots of files..." />
  </Folder>
</FileTree>

Use cases

• Repo structure tutorials — "Your repo should look like this"

• Configuration file location guides — "Drop nookdocs.config.json at your docs base directory"

• Migration guides — "Move your pages/ to app/"

• CLI scaffolding output — "Running nookdocs init creates this"

Non-openable folders

Set openable={false} on a <Folder> to lock it in its current state. The chevron disappears and clicking the folder does nothing. Useful for vendor or generated directories that the reader shouldn't explore:

<FileTree>
  <Folder name="src" defaultOpen>
    <File name="index.ts" />
  </Folder>
  <Folder name="vendor" openable={false}>
    <File name="...bundled dependencies..." />
  </Folder>
</FileTree>

Mintlify aliases

The Tree, Tree.Folder, and Tree.File names are recognized as aliases. If you're migrating from Mintlify, existing markup works without changes:

<Tree>
  <Tree.Folder name="src" defaultOpen>
    <Tree.File name="app.tsx" />
  </Tree.Folder>
</Tree>

RTL support

Indentation uses padding-inline-start and border-inline-start, so the tree visually mirrors correctly in RTL languages.

Props

FileTree

Folder

File