SoarStarter TanStack
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

PropTypeDefault
namestring-
defaultOpenbooleanfalse

File

PropTypeDefault
namestring-

On this page