Components

Tree

Hierarchical file and folder structures.

Use Tree (or its alias FileTree) to display file systems and project directories. Tree.Folder and Tree.File compose explicitly, or write a nested Markdown list inside the tree for quick static structures.

- layout.tsx
- page.tsx
- global.css
- utils.ts
- db.ts
package.json
tsconfig.json

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

Markdown list syntax#

Leave a blank line after the opening tag. A trailing slash (or nested items) marks a folder; folders with nested items expand by default.

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

<FileTree>

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

</FileTree>

Highlight the active path#

- layout.tsx
- page.tsx
package.json

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

Set --tree-highlight on the Tree style to override the tint.

Folders support arrow-key navigation: up/down moves, right expands, left collapses, * expands siblings, typing jumps to a name.

Properties#

Tree / FileTree#

Name	Type	Description
children	ReactNode	`Tree.Folder` / `Tree.File` nodes, or a Markdown list.

Tree.Folder#

Name	Type	Description
namerequired	string	Folder name shown in the tree.
defaultOpen	boolean	Whether the folder expands by default. Default: false
openable	boolean	Set to false for non-interactive folders. Default: true
highlight	boolean	Tint the folder as the active path. Default: false

Tree.File#

Name	Type	Description
namerequired	string	File name shown in the tree.
highlight	boolean	Tint the file as the active item. Default: false

Last updated on Sep 4, 2026

PreviousTooltip NextUpdate