FileTree component

To display the structure of a directory with files and collapsible subdirectories, use the <FileTree> component. Click on a subdirectory to open or close it.

The <FileTree> is a wrapper over the built-in <Tree> component provided by Mintlify, but with a data-driven interface: pass a list of objects and strings instead of composing JSX children manually.

Import

import { FileTree } from '/snippets/filetree.jsx';

Usage

Specify the structure of files and directories inside the items property as a JavaScript list of strings, objects, and nested lists.

import { FileTree } from '/snippets/filetree.jsx';

<FileTree items={[ /* ...entries, see below... */ ]} />

Specify files and placeholders

import { FileTree } from '/snippets/filetree.jsx';

{/* Files and a placeholder by the end */}
<FileTree
  items={[
    "file-name-1.ml",
    "file-name-2.hs",
    "file-name-3.mp3",
    "...", // will be rendered as …
  ]}
/>

Add notes and comments

import { FileTree } from '/snippets/filetree.jsx';

{/* Using objects to add notes or nested folders */}
<FileTree
  items={[
    "file-name-1",
    { kind: "file", name: "file-name-2", note: "very important file" },
    {
      kind: "folder",
      name: "best-folder",
      note: "not really",
      open: false, // otherwise defaults to true
      items: ["file-name-3-within-subfolder"],
    },
  ]}
/>

Specify folders and their state

import { FileTree } from '/snippets/filetree.jsx';

{/* Make all sub-folders be closed by default */}
<FileTree
  items={[
    { kind: "folder", name: "folder-1", open: true, items: ["something1"] },
    { kind: "folder", name: "folder-2", items: ["something2"] },
  ]}
  defaultOpen={false} {/* otherwise defaults to true */}
/>

<FileTree> props

Implementation: filetree.jsx

The <FileTree> component accepts the following props:

items (required)

type: FileTreeItem[]

Hierarchy of files and folders to display.

The FileTreeItem can be one of the following kinds:

• ... or … — both display a placeholder entry … indicating additional items in a directory that are intentionally omitted
• any string — name of the file inside the currently described directory
• { kind: "file", ...fields... } — an extended syntax for files, with the following fields:
  • name: string — the filename;
  • note?: string — optional comment, displayed next to the filename;
• { kind: "folder", ...fields... } — syntax for folders and directories, with the following fields:
  • name: string — the directory name;
  • note?: string — optional comment, displayed next to the directory name;
  • open?: boolean — whether to open the directory, defaults to true;
  • items: FileTreeItem[] — nested files and folders;

defaultOpen

type: boolean
default: true

Whether to open all folders on page load. Can be overridden by the open property of individual FileTreeItem entries.

Using <Tree> directly

For cases where a data-driven approach is unnecessary, use the built-in <Tree> component directly. It requires no import and accepts <Tree.File> and <Tree.Folder> sub-components as children.

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" />
    <Tree.Folder name="api" defaultOpen>
      <Tree.Folder name="auth">
        <Tree.File name="route.ts" />
      </Tree.Folder>
      <Tree.File name="route.ts" />
    </Tree.Folder>
    <Tree.Folder name="components">
      <Tree.File name="button.tsx" />
      <Tree.File name="dialog.tsx" />
      <Tree.File name="tabs.tsx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="package.json" />
</Tree>

app

layout.tsx

page.tsx

api

auth

route.ts

components

package.json