> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

## Files component for displaying file tree structures

components

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.

**`Markdown`**

```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 the docs