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

# Tree

File-system tree for illustrating project structure, directory layouts, and monorepo organization.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Tree playground on holydocs.com](https://holydocs.com/components/tree).

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

**src**

**components**

**Button.tsx**
      **Card.tsx**
      **Modal.tsx**
    **pages**

**index.tsx**
      **about.tsx**
    **app.tsx**
    **index.css**
  **package.json**
  **tsconfig.json**

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

**[Tile](/components/tile)**

Image-forward navigation tiles for featured destinations, launch highlights, and editorial-style section menus.

## More

- Interactive playground: [Tree on holydocs.com](https://holydocs.com/components/tree)
- Component library index: [/components](/components)