Writing contentComponents

Files

View as Markdown

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-basics.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-basics.mdx" href="/learn/docs/writing-content/markdown-basics" />
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-basics.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-basics.mdx" href="/learn/docs/writing-content/markdown-basics" />
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. Files and folders with the href property are underlined.

components
assets
markdown-basics.mdx
README.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-basics.mdx" href="/learn/docs/writing-content/markdown-basics" />
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-basics.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-basics.mdx" href="/learn/docs/writing-content/markdown-basics" />
12  <File name="README.md" />
13</Files>

Line highlighting and comments

Use the highlighted property to highlight specific files or folders with an accent background color. Use the comment property to add explanatory text that appears next to an item. These properties are useful for drawing attention to important files or providing additional context, similar to how code blocks support line highlighting and inline comments.

components
accordion.mdx# Collapsible content sections
button.mdx
card.mdx
tabs.mdx
assets
markdown.mdx
README.md# Contribute to the docs
Markdown
1<Files>
2  <Folder name="components" defaultOpen highlighted>
3    <File name="accordion.mdx" comment="Collapsible content sections"/>
4    <File name="button.mdx" />
5    <File name="card.mdx" />
6    <File name="tabs.mdx" highlighted/>
7  </Folder>
8  <Folder name="assets">
9    <File name="styles.css" comment="Customize theme colors"/>
10  </Folder>
11  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown"/>
12  <File name="README.md" highlighted comment="Contribute to the docs"/>
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 when a link is provided.

highlighted
boolean

Whether the line containing the folder should be visually highlighted with an accent background color. Use this to draw attention to important directories.

comment
string

Optional comment text that appears next to the folder name. Comments are automatically prefixed with # if not already present and styled in a monospace font with muted color.

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 when a link is provided.

highlighted
boolean

Whether the line containing the file should be visually highlighted with an accent background color. Use this to draw attention to important files.

comment
string

Optional comment text that appears next to the file name. Comments are automatically prefixed with # if not already present and styled in a monospace font with muted color.

className
string

Optional CSS class name for custom styling.