Skip to content

docs: add Files UI component documentation #1870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 9, 2025
Merged

docs: add Files UI component documentation #1870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
62bdf26
docs: add Files UI component documentation
devin-ai-integration[bot] Nov 8, 2025
0690071
docs: add Files component to navigation
devin-ai-integration[bot] Nov 8, 2025
004b559
add changelog, more realistic example, card on overview page
devalog Nov 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions fern/products/docs/docs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ navigation:
path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
icon: fa-duotone fa-sitemap
slug: schema-snippet
- page: Files
path: ./pages/component-library/default-components/files.mdx
icon: fa-duotone fa-folder-tree
slug: files
- page: Frame
path: ./pages/component-library/default-components/frames.mdx
icon: fa-duotone fa-window-maximize
Expand Down
37 changes: 37 additions & 0 deletions fern/products/docs/pages/changelog/2025-11-09.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
## 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" 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" />
</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" 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" />
</Files>
```

Read more in the [Files component documentation](/learn/docs/writing-content/components/files).
214 changes: 214 additions & 0 deletions fern/products/docs/pages/component-library/default-components/files.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
---
title: Files
description: Display interactive file tree structures with expandable folders
---

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

<div className="highlight-frame">
<Files>
<Folder name="components" 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" />
</Files>
</div>

```jsx Markdown maxLines=10
<Files>
<Folder name="components" 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" />
</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.

<div className="highlight-frame">
<Files>
<Folder name="components" defaultOpen>
<Folder name="layout" defaultOpen>
<File name="header.mdx" />
<File name="footer.mdx" />
<File name="sidebar.mdx" />
</Folder>
<Folder name="ui">
<File name="button.mdx" />
<File name="card.mdx" />
<File name="tabs.mdx" />
</Folder>
<File name="accordion.mdx" />
</Folder>
<Folder name="assets">
<File name="styles.css" />
</Folder>
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
<File name="README.md" />
</Files>
</div>

```jsx Markdown maxLines=10
<Files>
<Folder name="components" defaultOpen>
<Folder name="layout" defaultOpen>
<File name="header.mdx" />
<File name="footer.mdx" />
<File name="sidebar.mdx" />
</Folder>
<Folder name="ui">
<File name="button.mdx" />
<File name="card.mdx" />
<File name="tabs.mdx" />
</Folder>
<File name="accordion.mdx" />
</Folder>
<Folder name="assets">
<File name="styles.css" />
</Folder>
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
<File name="README.md" />
</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.

<div className="highlight-frame">
<Files>
<Folder name="components">
<File name="accordion.mdx" href="/docs/writing-content/components/accordions" />
<File name="button.mdx" href="/docs/writing-content/components/button" />
<File name="card.mdx" href="/docs/writing-content/components/cards" />
<File name="tabs.mdx" href="/docs/writing-content/components/tabs" />
</Folder>
<Folder name="assets">
<File name="styles.css" href="https://github.com/fern-api/docs/blob/main/fern/assets/styles.css" />
</Folder>
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
<File name="README.md" href="https://github.com/fern-api/docs/blob/main/README.md" />
</Files>
</div>

```jsx Markdown maxLines=10
<Files>
<Folder name="components">
<File name="accordion.mdx" href="/docs/writing-content/components/accordions" />
<File name="button.mdx" href="/docs/writing-content/components/button" />
<File name="card.mdx" href="/docs/writing-content/components/cards" />
<File name="tabs.mdx" href="/docs/writing-content/components/tabs" />
</Folder>
<Folder name="assets">
<File name="styles.css" href="https://github.com/fern-api/docs/blob/main/fern/assets/styles.css" />
</Folder>
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
<File name="README.md" href="https://github.com/fern-api/docs/blob/main/README.md" />
</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.

<div className="highlight-frame">
<Files>
<Folder name="components" 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" />
</Files>
</div>

```jsx Markdown maxLines=10
<Files>
<Folder name="components" 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" />
</Files>
```

## Properties

### `<Files>` properties

<ParamField path="children" type="JSX" required={true}>
The file tree content. Should contain `<Folder>` and `<File>` components.
</ParamField>

<ParamField path="className" type="string" required={false}>
Optional CSS class name for custom styling.
</ParamField>

### `<Folder>` properties

<ParamField path="name" type="string" required={true}>
The folder name to display.
</ParamField>

<ParamField path="defaultOpen" type="boolean" default={false}>
Whether the folder should be expanded when the page loads. If not specified, the folder will be collapsed by default.
</ParamField>

<ParamField path="children" type="JSX" required={false}>
The nested content within the folder. Can include `<File>` and other `<Folder>` components.
</ParamField>

<ParamField path="href" type="string" required={false}>
Optional URL to make the folder name clickable. The name will show an underline on hover when a link is provided.
</ParamField>

<ParamField path="className" type="string" required={false}>
Optional CSS class name for custom styling.
</ParamField>

### `<File>` properties

<ParamField path="name" type="string" required={true}>
The file name to display.
</ParamField>

<ParamField path="href" type="string" required={false}>
Optional URL to make the file name clickable. The name will show an underline on hover when a link is provided.
</ParamField>

<ParamField path="className" type="string" required={false}>
Optional CSS class name for custom styling.
</ParamField>
9 changes: 8 additions & 1 deletion fern/products/docs/pages/component-library/default-components/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: 'Components overview'
description: 'Built-in components for creating interactive documentation'
---

Fern includes 21 built-in components for creating interactive documentation. Select a component below to view usage examples and configuration options.
Fern includes 22 built-in components for creating interactive documentation. Select a component below to view usage examples and configuration options.

<CardGroup cols={3}>
<Card
Expand Down Expand Up @@ -97,6 +97,13 @@ Fern includes 21 built-in components for creating interactive documentation. Sel
>
Endpoint schema snippets from your API Reference
</Card>
<Card
title="Files"
icon="fa-duotone fa-folder-tree"
href="/docs/writing-content/components/files"
>
Display interactive file tree structures with expandable folders
</Card>
<Card
title="Frame"
icon="fa-duotone fa-window-maximize"
Expand Down
Loading