# Tree

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

A file and folder tree with collapsible folders and keyboard navigation.

Shows a file and folder structure. Click a folder to open or close it.

<Tree>
  <Tree.Folder name="docs" defaultOpen>
    <Tree.File name="index.mdx" />
    <Tree.Folder name="guides">
      <Tree.File name="quickstart.mdx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="writedocs.json" highlight />
</Tree>

```mdx
<Tree>
  <Tree.Folder name="docs" defaultOpen>
    <Tree.File name="index.mdx" />
    <Tree.Folder name="guides">
      <Tree.File name="quickstart.mdx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="writedocs.json" highlight />
</Tree>
```

## From a Markdown list

A nested Markdown list works too, inside `<Tree>`. A name ending in `/`, or with items nested under it, is a folder, and folders with items start open. Leave a blank line after the opening tag and before the closing one:

<Tree>

- docs/
  - index.mdx
- writedocs.json

</Tree>

```mdx
<Tree>

- docs/
  - index.mdx
- writedocs.json

</Tree>
```

## Highlighting

`highlight` marks a file or folder - the files a step changes, say. A highlighted folder colors everything inside it too. The color is the site's primary color; set another on the tree with `style`:

<Tree style={{ "--tree-highlight": "rgb(234 88 12)" }}>
  <Tree.Folder name="src" defaultOpen>
    <Tree.Folder name="routes" defaultOpen highlight>
      <Tree.File name="payments.ts" />
      <Tree.File name="refunds.ts" />
    </Tree.Folder>
    <Tree.File name="server.ts" />
  </Tree.Folder>
  <Tree.File name=".env" highlight />
</Tree>

```mdx
<Tree style={{ "--tree-highlight": "rgb(234 88 12)" }}>
  <Tree.Folder name="src" defaultOpen>
    <Tree.Folder name="routes" defaultOpen highlight>
      <Tree.File name="payments.ts" />
      <Tree.File name="refunds.ts" />
    </Tree.Folder>
    <Tree.File name="server.ts" />
  </Tree.Folder>
  <Tree.File name=".env" highlight />
</Tree>
```

## Folders that don't close

`openable={false}` keeps a folder as `defaultOpen` sets it - open here, with no way to close it:

<Tree>
  <Tree.Folder name="config" defaultOpen openable={false}>
    <Tree.File name="production.json" />
    <Tree.File name="staging.json" />
  </Tree.Folder>
</Tree>

```mdx
<Tree>
  <Tree.Folder name="config" defaultOpen openable={false}>
    <Tree.File name="production.json" />
    <Tree.File name="staging.json" />
  </Tree.Folder>
</Tree>
```

## Keyboard

Up and Down move between visible items, Right opens a folder (or moves into it), Left closes it (or moves to its parent), Home and End jump to the first and last items, Enter and Space open or close a folder, `*` opens every folder next to the current one, and typing jumps to the next item whose name starts with those letters.

## Tree.Folder props

**`name`** `string` required

**`defaultOpen`** `boolean` default: `false`

Starts the folder open.

**`openable`** `boolean` default: `true`

Set to `false` for a folder that can't be opened or closed - it stays as `defaultOpen` sets it.

**`highlight`** `boolean`

Marks the folder, and colors everything inside it.

## Tree.File props

**`name`** `string` required

**`highlight`** `boolean`

Marks the file.