---
title: File trees
description: Files, Folder and File.
---

Three components render a directory tree with per-entry comments.

## `Files`

The root container. No props.

**Children: `File` or `Folder` only, at least one.**

## `Folder`

<ParamField name="name" type="string" required>
  The directory's name.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Renders expanded.
</ParamField>

<ParamField name="comment" type="string">
  Note shown beside the entry.
</ParamField>

**Children: `File` or `Folder` only** — nest to whatever depth the tree needs.

## `File`

<ParamField name="name" type="string" required>
  The file's name.
</ParamField>

<ParamField name="comment" type="string">
  Note shown beside the entry.
</ParamField>

A leaf: no children.

## Example

```mdx
<Files>
  <File name="docs.json" comment="the single configuration entry point" />
  <Folder name="content" defaultOpen>
    <File name="index.mdx" />
    <Folder name="reference">
      <File name="cli.mdx" />
    </Folder>
  </Folder>
</Files>
```

## When a fenced block is better

A fenced code block showing a tree is copy-pasteable, diffs cleanly, and costs nothing to
write. Use these components when you want per-entry commentary or collapsible depth —
otherwise plain text is the better tool.