# File Tree

Display a hierarchical directory structure with expandable folders and files, useful for illustrating project layouts.

---

## Default

```tsx
import { Tree, Folder, File } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Tree>
      <Folder name=".vercel" defaultOpen>
        <Folder name="output" defaultOpen>
          <Folder name="functions" defaultOpen>
            <Folder name="edge.func" defaultOpen>
              <File name=".vc-config.json" href="/" />
              <File name="index.js" />
            </Folder>
          </Folder>
        </Folder>
      </Folder>
      <Folder name="app">
        <File name="main.tsx" type="edge-function" />
        <File name="dashboard.tsx" type="lambda" />
        <File name="dashboard.tsx" type="middleware" />
      </Folder>
    </Tree>
  );
}
```