# November 9, 2025

## 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.

<Files>
  <Folder name="components" highlighted defaultOpen>
    <File name="accordion.mdx" />

    <File name="button.mdx" />

    <File name="card.mdx" />

    <File name="tabs.mdx" />
  </Folder>

  <Folder name="assets">
    <File name="styles.css" />
  </Folder>

  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />

  <File name="README.md" comment="Contribute to the docs" />

  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown-basics" />

  <File name="README.md" />
</Files>

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.

```jsx Markdown maxLines=10
<Files>
  <Folder name="components" highlighted defaultOpen>
    <File name="accordion.mdx" />
    <File name="button.mdx" />
    <File name="card.mdx" />
    <File name="tabs.mdx" />
  </Folder>
  <Folder name="assets">
    <File name="styles.css" />
  </Folder>
  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
  <File name="README.md" comment="Contribute to the docs"/>
  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown-basics" />
  <File name="README.md" />
</Files>
```

Read more in the [Files component documentation](/learn/docs/writing-content/components/files).