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

​
Basic tree

app
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.
app
layout.tsx
page.tsx
api
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>

​
Keyboard navigation

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

​
name
string
required
The name of the folder displayed in the tree.
​
defaultOpen
boolean
default:"false"
Whether the folder is expanded by default.
​
openable
boolean
default:"true"
Whether the folder can be opened and closed. Set to false for non-interactive folders.

​
Tree.File

​
name
string
required
The name of the file displayed in the tree.