Changelog

Files component for displaying file tree structures

The new <Files> component creates visual file tree structures with expandable folders and nested files. Use it to show project structures, directory layouts, or any hierarchical file organization in your documentation.

The component consists of three parts: <Files> as the container, <Folder> for directories that can be expanded or collapsed, and <File> for individual files. Folders and files support optional href properties to make them clickable links, and folders can use defaultOpen to start expanded when the page loads.

1
<Files>
2
  <Folder name="components" highlighted defaultOpen>
3
    <File name="accordion.mdx" />
4
    <File name="button.mdx" />
5
    <File name="card.mdx" />
6
    <File name="tabs.mdx" />
7
  </Folder>
8
  <Folder name="assets">
9
    <File name="styles.css" />
10
  </Folder>
11
  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
12
  <File name="README.md" comment="Contribute to the docs"/>
13
  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown-basics" />
14
  <File name="README.md" />
15
</Files>

Read more in the Files component documentation.