Files

Render a file tree with collapsible folders.

Files, Folder, and File draw a file tree. Folders are built on native details/summary, so they collapse and expand without JavaScript and can start open.

Usage#

app

layout.tsx

page.tsx

docs

layout.tsx

[[...slug]]

page.tsx

content

docs

meta.json

index.mdx

docs.config.ts

mdx

<Files>
  <Folder name="app" defaultOpen>
    <File name="layout.tsx" />
    <File name="page.tsx" />
    <Folder name="docs" defaultOpen>
      <File name="layout.tsx" />
      <Folder name="[[...slug]]">
        <File name="page.tsx" />
      </Folder>
    </Folder>
  </Folder>
  <Folder name="content">
    <Folder name="docs">
      <File name="meta.json" />
      <File name="index.mdx" />
    </Folder>
  </Folder>
  <File name="docs.config.ts" />
</Files>

Custom file icons#

File accepts an icon node to replace the default document icon.

README.md

mdx

<Files>
  <File name="README.md" icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16v16H4z" /></svg>} />
</Files>

Props#

Folder#

Name	Type	Default	Description
`name`*	`string`	-	Folder label.
`defaultOpen`	`boolean`	`false`	Expanded on first render.
`children`	`ReactNode`	-	Nested Folder and File elements.

File#

Name	Type	Default	Description
`name`*	`string`	-	File label.
`icon`	`ReactNode`	-	Replaces the default file icon.