Files

A file tree with collapsible folders, for showing a project's structure in MDX.

layout.tsx

[[...slug]]/page.tsx

package.json

Installation

npx shadcn@latest add @docscn/files

Usage

import { File, Files, Folder } from "@/components/docs/components/files";

<Files>
  <Folder name="app" defaultOpen>
    <File name="layout.tsx" />
  </Folder>
  <File name="package.json" />
</Files>

The docs block adds Files, Folder and File to your MDX components, which Fumadocs' opt-in remark-mdx-files plugin needs: it turns files code blocks into these components.

Props

Component	Prop	Type	Description
`Folder`	`name`	`string`	The folder's name.
`Folder`	`defaultOpen`	`boolean`	Open the folder at first.
`Folder`	`disabled`	`boolean`	Keep the folder from opening.
`File`	`name`	`string`	The file's name.
`File`	`icon`	`ReactNode`	Replace the file icon.

Folders are built on shadcn/ui collapsible.

Accordion

Collapsible sections that can be linked to.

Type table

A table of props or fields that expand to show their details.

Files

InstallationCopy Anchor Link

UsageCopy Anchor Link

PropsCopy Anchor Link

On this page

Installation

Usage

Props