AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
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
<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>index.mdx
quickstart.mdx
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:
<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>Non-openable folders
Set openable={false} to display a folder that cannot be expanded, useful for indicating a directory without listing its contents:
<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>app.tsx
Props
Tree
Tree renders a bordered container for the file hierarchy. It accepts children.