> 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 组件

全新的 `<Files>` 组件可以创建可视化的文件树结构，支持可展开的文件夹和嵌套文件。使用它来展示项目结构、目录布局或文档中的任何分层文件组织。

该组件包含三个部分：`<Files>` 作为容器，`<Folder>` 用于可展开或折叠的目录，`<File>` 用于单个文件。文件夹和文件支持可选的 `href` 属性以使其成为可点击链接，文件夹可以使用 `defaultOpen` 在页面加载时默认展开。

**`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>
```

阅读文档