Tree

Use the tree component to display hierarchical file and folder structures with collapsible nodes and syntax highlighting for path names.

Use tree components to display hierarchical structures like file systems, project directories, or nested content. The tree component supports keyboard navigation and accessibility features.

Create trees with either a Markdown list or the Tree.Folder and Tree.File components. <Tree> and <FileTree> are aliases, so either tag works with either syntax.

Use the Markdown list syntax for quick, static trees where every folder can expand by default. Use the component syntax when you need to control open state per folder with defaultOpen, mark folders as non-interactive with openable, or mix files and folders at arbitrary depth.

Markdown list syntax

Write a nested Markdown list inside <FileTree> (or <Tree>) to describe a folder structure. Add a trailing slash to mark a folder, or nest items under it. Folders that contain nested items expand by default.

docs/
- index.mdx
- guides/
  - configuration.mdx
docs.config.ts

File tree example

<FileTree>

- docs/
  - index.mdx
  - guides/
    - configuration.mdx
- docs.config.ts

</FileTree>

Leave a blank line after the opening tag and before the closing tag so that the list parses as Markdown. Names strip inline formatting like `code`, **bold**, or _italic_.

Basic tree

layout.tsx

page.tsx

global.css

package.json

tsconfig.json

Tree example

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" />
    <Tree.File name="global.css" />
  </Tree.Folder>
  <Tree.Folder name="lib">
    <Tree.File name="utils.ts" />
    <Tree.File name="db.ts" />
  </Tree.Folder>
  <Tree.File name="package.json" />
  <Tree.File name="tsconfig.json" />
</Tree>

Nested folders

Create deeply nested structures by nesting Tree.Folder components within each other.

layout.tsx

page.tsx

route.ts

package.json

Nested folders example

<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>

The tree component supports keyboard navigation.

Arrow keys: Navigate up and down through visible items.
Right arrow: Expand a closed folder or move to the first child of an open folder.
Left arrow: Collapse an open folder or move to the parent folder.
Home: Jump to the first item in the tree.
End: Jump to the last visible item in the tree.
Enter/Space: Toggle folder open/closed state.
*: Expand all sibling folders at the current level.
Type-ahead search: Type characters to jump to items that start with those characters.

Properties

Tree.Folder

namestringrequired

The name of the folder displayed in the tree.

defaultOpenbooleandefault: false

Whether the folder expands by default.

openablebooleandefault: true

Whether users can open and close the folder. Set to false for non-interactive folders.

Tree.File