Tree

Show a compact, expandable file and folder hierarchy in MDX.

app
- routes.ts
- components
  - theme-provider.tsx
heyo-docs.config.ts

<Tree>
<Folder name="app">
  <File name="routes.ts" />
  <Folder name="components" defaultOpen={false}>
    <File name="theme-provider.tsx" />
  </Folder>
</Folder>
<File name="heyo-docs.config.ts" />
</Tree>

Tree renders a monospaced hierarchy for project structure, configuration locations, or conceptual nesting. Use Folder for a branch and File for a leaf. Folders are native disclosure controls, so readers can collapse a large branch without any JavaScript state or additional configuration.

When to use it

Use a tree to orient a reader in an unfamiliar repository, point out files that must be edited, or explain how generated files relate to source files. It is more scannable than an indented code block and lets a reader collapse secondary detail.

Keep labels to names and short paths. A tree describes structure; explain what a file does in the surrounding prose or link to the relevant guide.

Folders are expanded by default. Set defaultOpen={false} for verbose branches so the important top-level files remain visible first. Tree does not infer folders from the filesystem: the MDX author controls every displayed item, which makes it safe to show a conceptual or abbreviated structure.

Keep the important files in view

Collapse the implementation-heavy branch by default when a page is explaining where readers should begin rather than every file in the repository.

heyo-docs.config.ts
content
- index.mdx
- quickstart.mdx
app
- root.tsx
- components
  - navigation.tsx
  - theme-provider.tsx

Separate source from generated output

An abbreviated project tree can show where readers should make changes while keeping implementation folders available as optional detail.

content
- guides
  - quickstart.mdx
  - deployment.mdx
app
- components
  - theme-provider.tsx
- routes.ts
dist
- index.html

<Tree>
<Folder name="content">
  <Folder name="guides">
    <File name="quickstart.mdx" />
    <File name="deployment.mdx" />
  </Folder>
</Folder>
<Folder defaultOpen={false} name="app">
  <Folder name="components">
    <File name="theme-provider.tsx" />
  </Folder>
  <File name="routes.ts" />
</Folder>
<Folder defaultOpen={false} name="dist">
  <File name="index.html" />
</Folder>
</Tree>

Properties

childrenReactNodeoptional

A Tree accepts Folder and File entries. A Folder accepts nested tree entries, allowing the hierarchy to continue as deeply as needed.

classNamestringoptional

Extra classes applied to the outer Tree list.

nameReactNodeoptional

The label for a Folder or tree-style File. A File can also use its children as the label.

defaultOpenbooleanoptional

A Folder prop that controls its initial disclosure state. It defaults to true.