ContentFiles

Use ContentFiles to explain a project layout, content package, or directory structure. Files display names and optional icons; folders expand and collapse. Avoid it for downloads or document links: use ordinary links or ContentLinkCard for those actions.

Parameters

Parameter	Required	Default	Description
`label`	Yes	None	Accessible name describing the file structure.

ContentFile helper

ContentFile is a display-only leaf inside ContentFiles or ContentFolder. It has no child content or download action.

Parameter	Required	Default	Description
`name`	Yes	None	Visible filename.
`icon`	No	Standard file icon	Decorative emoji or text symbol replacing the file icon.

ContentFolder helper

ContentFolder is a branch inside ContentFiles or another ContentFolder. Every folder contains at least one ContentFile or ContentFolder.

Parameter	Required	Default	Description
`name`	Yes	None	Visible folder name.
`defaultOpen`	No	`false`	Whether the folder starts expanded.

Example

<ContentFiles label="Publishing project files">
  <ContentFolder name="content" defaultOpen={true}>
    <ContentFolder name="docs">
      <ContentFile name="overview.mdx" icon="📄" />
    </ContentFolder>
    <ContentFile name="blog.mdx" />
  </ContentFolder>
  <ContentFile name="package.json" />
</ContentFiles>

content

docs

overview.mdx

blog.mdx

package.json

Accessibility and composition

Provide at least one named file or folder and a meaningful group label. Use readable names and keep icons decorative. Folder nesting conveys the directory structure; no component imports are needed.

Folders use native disclosures, support keyboard activation, and work without JavaScript. Keep essential explanations outside collapsed folders. For a small structure, a nested Markdown list or plain-text tree may be sufficient.

This element uses Fumadocs files, with native folder disclosures and GoVisit styling for static content pages.