Tree
Display file and folder hierarchies with interactive expand/collapse and keyboard navigation. Ideal for project structure documentation.
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
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
</TreeFolder>
</Tree>Basic Tree
src
package.json
<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:
my-app
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
Folder name displayed in the tree.
Start in expanded state.
Whether the folder can be toggled.
TreeFile
File name displayed in the tree.