FileTree

Usage

<FileTree> renders a directory listing as a clickable tree. Folders toggle open/closed; files are leaves.

<FileTree>
  <Folder name="src" defaultOpen>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="card.tsx" />
      <File name="callout.tsx" />
    </Folder>
    <Folder name="lib">
      <File name="utils.ts" />
      <File name="config.ts" />
    </Folder>
    <File name="index.ts" />
  </Folder>
  <File name="package.json" />
  <File name="tsconfig.json" />
</FileTree>

Default open

Pass defaultOpen to a <Folder> to expand it on first render. Useful for the most relevant folder in a large tree:

<FileTree>
  <Folder name="docs" defaultOpen>
    <File name="introduction.mdx" />
    <File name="quickstart.mdx" />
  </Folder>
  <Folder name="src">
    <File name="...lots of files..." />
  </Folder>
</FileTree>

Use cases

• Repo structure tutorials — "Your repo should look like this"

• Configuration file location guides — "Drop codiv.config.json here"

• Migration guides — "Move your pages/ to app/"

• CLI scaffolding output — "Running codivdocs init creates this"

RTL support

Indentation uses padding-inline-start and border-inline-start, so the tree visually mirrors correctly in RTL languages.

Props

FileTree

Folder

File