> ## Documentation Index
> Fetch the complete documentation index at: https://context7-context7-agent-7fa369c1-78b4-4d1a-9826-94d1c7e68c0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tree

> Show a file and folder structure

Use nested folder and file components.

## Usage

```mdx theme={null}
<Tree>
  <Tree.Folder name="src" defaultOpen>
    <Tree.File name="index.ts" highlight />
  </Tree.Folder>
  <Tree.File name="package.json" />
</Tree>
```

Folders accept `defaultOpen`, `openable`, and `highlight`. `<FileTree>` is an alias for `<Tree>`.

## Example

<Tree>
  <Tree.Folder name="src" defaultOpen>
    <Tree.File name="index.ts" highlight />
  </Tree.Folder>

  <Tree.File name="package.json" />
</Tree>