Tree

For isolated previews, theme switching, and sandbox editing, open the Tree playground on holydocs.com .

When to use

Use this component when the documentation itself should act like a guided product surface, not just a linear wall of text.

Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Project Structure

Typical src directory layout.

mdx
<Tree>  <Folder name="src">    <Folder name="components">      <File name="Button.tsx" />      <File name="Card.tsx" />      <File name="Modal.tsx" />    </Folder>    <Folder name="pages">      <File name="index.tsx" />      <File name="about.tsx" />    </Folder>    <File name="app.tsx" />    <File name="index.css" />  </Folder>  <File name="package.json" />  <File name="tsconfig.json" /></Tree>

Props

This component has no configurable props. Use its child content to shape the output.

Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<Tree>  <Folder name="src">    <Folder name="components">      <File name="Button.tsx" />      <File name="Card.tsx" />      <File name="Modal.tsx" />    </Folder>    <Folder name="pages">      <File name="index.tsx" />      <File name="about.tsx" />    </Folder>    <File name="app.tsx" />    <File name="index.css" />  </Folder>  <File name="package.json" />  <File name="tsconfig.json" /></Tree>

Tips

• Reserve high-visibility navigation components for the few destinations you genuinely want to prioritize.
• Use concise titles. Navigation surfaces degrade quickly when labels become sentence-like.
• When you mix several navigation patterns on one page, make sure one is clearly primary and the others are supporting.

Related Components

More

• Interactive playground: Tree on holydocs.com
• Component library index: /components