> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Tree

Display interactive file and directory structures.

Use the `Tree` component to visualize file and folder hierarchies. Folders are collapsible by default, giving readers an interactive way to explore project structures.

## Basic usage

```mdx
<Tree>
  <Tree.Folder name="docs" defaultOpen>
    <Tree.File name="index.mdx" />
    <Tree.File name="quickstart.mdx" />
    <Tree.Folder name="components" defaultOpen>
      <Tree.File name="callout.mdx" />
      <Tree.File name="card.mdx" />
      <Tree.File name="tabs.mdx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="docs.json" />
  <Tree.File name="package.json" />
</Tree>
```

  - docs/
    - index.mdx
    - quickstart.mdx
    - components/
      - callout.mdx
      - card.mdx
      - tabs.mdx

  - docs.json
  - package.json

## Collapsed by default

Omit `defaultOpen` to keep folders collapsed. Readers can click to expand them:

```mdx
<Tree>
  <Tree.Folder name="src">
    <Tree.Folder name="components">
      <Tree.File name="header.tsx" />
      <Tree.File name="footer.tsx" />
    </Tree.Folder>
    <Tree.Folder name="lib">
      <Tree.File name="utils.ts" />
    </Tree.Folder>
    <Tree.File name="index.ts" />
  </Tree.Folder>
</Tree>
```

  - src/
    - components/
      - header.tsx
      - footer.tsx

    - lib/
      - utils.ts

    - index.ts

## Non-openable folders

Set `openable={false}` to display a folder that cannot be expanded, useful for indicating a directory without listing its contents:

```mdx
<Tree>
  <Tree.Folder name="public" openable={false} />
  <Tree.Folder name="src" defaultOpen>
    <Tree.File name="app.tsx" />
  </Tree.Folder>
  <Tree.Folder name="node_modules" openable={false} />
</Tree>
```

  - public/
  - src/
    - app.tsx

  - node_modules/

## Props

### Tree

`Tree` renders a bordered container for the file hierarchy. It accepts `children`.

### Tree.Folder

- `name` (type: string, required: true): Folder name displayed in the tree.
- `defaultOpen` (type: boolean, required: false, default: false): Whether the folder starts expanded.
- `openable` (type: boolean, required: false, default: true): Whether the folder can be toggled open and closed.
- `children` (type: ReactNode, required: false): Nested files and folders.

### Tree.File

- `name` (type: string, required: true): File name displayed in the tree.