Components
File Tree
Display directory structures.
Usage
app.vue
import { File, Folder, Files } from 'fumadocs-ui/components/files';
<Files>
<Folder name="app" defaultOpen>
<Folder name="components">
<File name="Header.tsx" />
<File name="Footer.tsx" />
</Folder>
<Folder name="composables">
<File name="useErrorHandler.ts" />
</Folder>
<File name="app.vue" />
</Folder>
<Folder name="docs">
<File name="index.md" />
</Folder>
</Files>Project Structure Example
layout.tsx
globals.css
source.config.ts
next.config.mjs
package.json
Props
Files
The container for file tree items.
Folder
| Prop | Type | Default |
|---|---|---|
| name | string | - |
| defaultOpen | boolean | false |
File
| Prop | Type | Default |
|---|---|---|
| name | string | - |