Writing contentComponents

Files

The <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, and <File> for individual files.

Usage

components
accordion.mdx
button.mdx
card.mdx
tabs.mdx
assets
markdown.mdx
README.md
Markdown
1<Files>
2  <Folder name="components" 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" />
13</Files>

Variants

Nested folders

You can nest folders within folders to create deep directory structures. The component automatically adds visual nesting lines to show the hierarchy.

components
layout
header.mdx
footer.mdx
sidebar.mdx
ui
accordion.mdx
assets
markdown.mdx
README.md
Markdown
1<Files>
2  <Folder name="components" defaultOpen>
3    <Folder name="layout" defaultOpen>
4      <File name="header.mdx" />
5      <File name="footer.mdx" />
6      <File name="sidebar.mdx" />
7    </Folder>
8    <Folder name="ui">
9      <File name="button.mdx" />
10      <File name="card.mdx" />
11      <File name="tabs.mdx" />
12    </Folder>
13    <File name="accordion.mdx" />
14  </Folder>
15  <Folder name="assets">
16    <File name="styles.css" />
17  </Folder>
18  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
19  <File name="README.md" />
20</Files>

Linked files and folders

Add the href property to make files or folders clickable. This is useful for linking to documentation pages, GitHub repositories, or other resources.

components
assets
markdown.mdxREADME.md
Markdown
1<Files>
2  <Folder name="components">
3    <File name="accordion.mdx" href="/docs/writing-content/components/accordions" />
4    <File name="button.mdx" href="/docs/writing-content/components/button" />
5    <File name="card.mdx" href="/docs/writing-content/components/cards" />
6    <File name="tabs.mdx" href="/docs/writing-content/components/tabs" />
7  </Folder>
8  <Folder name="assets">
9    <File name="styles.css" href="https://github.com/fern-api/docs/blob/main/fern/assets/styles.css" />
10  </Folder>
11  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
12  <File name="README.md" href="https://github.com/fern-api/docs/blob/main/README.md" />
13</Files>

Default open folders

Use the defaultOpen property to have specific folders expanded when the page loads. This is useful for highlighting important directories or showing the most relevant parts of a file structure.

components
accordion.mdx
button.mdx
card.mdx
tabs.mdx
assets
markdown.mdx
README.md
Markdown
1<Files>
2  <Folder name="components" 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" />
13</Files>

Properties

<Files> properties

children
JSXRequired

The file tree content. Should contain <Folder> and <File> components.

className
string

Optional CSS class name for custom styling.

<Folder> properties

name
stringRequired

The folder name to display.

defaultOpen
boolean

Whether the folder should be expanded when the page loads. If not specified, the folder will be collapsed by default.

children
JSX

The nested content within the folder. Can include <File> and other <Folder> components.

href
string

Optional URL to make the folder name clickable. The name will show an underline on hover when a link is provided.

className
string

Optional CSS class name for custom styling.

<File> properties

name
stringRequired

The file name to display.

href
string

Optional URL to make the file name clickable. The name will show an underline on hover when a link is provided.

className
string

Optional CSS class name for custom styling.