Files
Display file structure in your documentation
page.tsx
layout.tsx
page.tsx
global.css
package.json
Install to your codebase
Easier customisation & control.
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
Folder
Prop
Type
As CodeBlock
You can convert files codeblocks into the MDX usage with the remarkMdxFiles remark plugin.
import { remarkMdxFiles } from 'fumadocs-core/mdx-plugins';
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkPlugins: [remarkMdxFiles],
},
});```files
project
├── src
│ ├── index.js
│ └── utils
│ └── helper.js
├── package.json
```How is this guide?
Last updated on