Files

page.tsx

layout.tsx

page.tsx

global.css

package.json

Usage

Wrap file components in Files.

import { File, Folder, Files } from 'fumadocs-ui/components/files';
 
<Files>
  <Folder name="app" defaultOpen>
    <File name="layout.tsx" />
    <File name="page.tsx" />
    <File name="global.css" />
  </Folder>
  <Folder name="components">
    <File name="button.tsx" />
    <File name="tabs.tsx" />
    <File name="dialog.tsx" />
  </Folder>
  <File name="package.json" />
</Files>

File

Prop	Type	Default
`name`	`string`	-
`icon`	`ReactNode`	-

Folder

Prop	Type	Default
`name`	`string`	-
`disabled`	`boolean`	-
`defaultOpen`	`boolean`	`false`

Usage

File

Folder

On this page