Tree

Visualize file and folder hierarchies with the Tree component, including collapsible folders for interactive project structure examples.

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


<Tree>
  <Tree.Folder name="docs" defaultOpen>
    <Tree.File name="index.mdx" />
    <Tree.File name="quickstart.mdx" />
    <Tree.Folder name

Tree: Visualize file and folder hierarchies... · Blode.md


<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>


<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>

Field	Type	Description	Required	Default
`name`	string	Folder name displayed in the tree.	Yes	—
`defaultOpen`	boolean	Whether the folder starts expanded.	Optional	false
`openable`	boolean	Whether the folder can be toggled open and closed.	Optional	true
`children`	ReactNode	Nested files and folders.	Optional	—

Tree

Basic usage

Tree

Basic usage

Collapsed by default

Non-openable folders

Props

Tree

Tree.Folder

Tree.File