Tree

Tree displays file and folder hierarchies with interactive expand/collapse and full keyboard navigation.

Basic Tree

src

package.json

<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
    <TreeFile name="config.ts" />
  </TreeFolder>
  <TreeFile name="package.json" />
</Tree>

Nested Folders

Folders can be nested to any depth:

app

package.json

<Tree>
  <TreeFolder name="app" defaultOpen>
    <TreeFile name="layout.tsx" />
    <TreeFile name="page.tsx" />
    <TreeFolder name="api" defaultOpen>
      <TreeFolder name="auth">
        <TreeFile name="route.ts" />
      </TreeFolder>
      <TreeFile name="health.ts" />
    </TreeFolder>
    <TreeFolder name="components">
      <TreeFile name="Button.tsx" />
      <TreeFile name="Card.tsx" />
    </TreeFolder>
  </TreeFolder>
  <TreeFile name="package.json" />
</Tree>

Collapsed by Default

Folders are collapsed by default. Use defaultOpen to expand them initially:

src

README.md

<Tree>
  <TreeFolder name="src">
    <TreeFolder name="components">
      <TreeFile name="Header.tsx" />
      <TreeFile name="Footer.tsx" />
    </TreeFolder>
    <TreeFile name="index.ts" />
  </TreeFolder>
  <TreeFile name="README.md" />
</Tree>

The Tree component supports full keyboard navigation:

Key	Action
`Arrow Down`	Move to next item
`Arrow Up`	Move to previous item
`Arrow Right`	Expand folder or move to first child
`Arrow Left`	Collapse folder or move to parent
`Home`	Jump to first item
`End`	Jump to last visible item
`Enter` / `Space`	Toggle folder expand/collapse
Type characters	Jump to matching item

Properties

TreeFolder

stringrequired

Folder name displayed in the tree.

booleandefault: false

Start in expanded state.

booleandefault: true

Whether the folder can be toggled.

TreeFile