---
title: Tree
description: Display file and folder hierarchies with interactive expand/collapse and keyboard navigation. Ideal for project structure documentation.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Tree displays file and folder hierarchies with interactive expand/collapse and full keyboard navigation. It's designed for documenting project structures, showing directory layouts, or explaining where files should go in a codebase.

Use Tree when:
- **Showing project structure** for getting started guides
- **Explaining file organization** in tutorials
- **Documenting CLI output** that shows directory trees
- **Illustrating where to add files** in configuration guides

## Usage

```mdx
<Tree>
  <TreeFolder name="src" defaultOpen>
    <TreeFile name="index.ts" />
  </TreeFolder>
</Tree>
```

## Basic Tree

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

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

## Project Structure Example

Show readers what a project looks like after setup:

<Tree>
  <TreeFolder name="my-app" defaultOpen>
    <TreeFolder name="src" defaultOpen>
      <TreeFile name="index.ts" />
      <TreeFile name="config.ts" />
    </TreeFolder>
    <TreeFile name="package.json" />
    <TreeFile name="README.md" />
  </TreeFolder>
</Tree>

## Tree vs Code Blocks

| Feature | Tree | Code block |
|---------|------|------------|
| Interactive | Yes (expand/collapse) | No |
| Keyboard navigation | Full support | No |
| Visual hierarchy | Icons + indentation | Text only |
| Best for | Documentation | Quick inline references |

Use Tree for primary structure documentation. Use code blocks for quick inline references like "create `src/index.ts`".

## Keyboard Navigation

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 |

## Props

### TreeFolder

<ParamField name="name" type="string" required>
  Folder name displayed in the tree.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Start in expanded state.
</ParamField>

<ParamField name="openable" type="boolean" default="true">
  Whether the folder can be toggled.
</ParamField>

### TreeFile

<ParamField name="name" type="string" required>
  File name displayed in the tree.
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>