File trees

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

namestringrequired

The directory’s name.

defaultOpenbooleandefault: false

Renders expanded.

commentstring

Note shown beside the entry.

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

File

namestringrequired

The file’s name.

commentstring

Note shown beside the entry.

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.