Skip to content

Commit 9f9117f

Browse files
devin-ai-integration[bot]chdeskurdevalog
authored
docs: add Files UI component documentation (#1870)
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Catherine Deskur <[email protected]> Co-authored-by: Devin Logan <[email protected]>
1 parent 473271d commit 9f9117f

File tree

4 files changed

+263
-1
lines changed

4 files changed

+263
-1
lines changed

‎fern/products/docs/docs.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,10 @@ navigation:
8585
path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
8686
icon: fa-duotone fa-sitemap
8787
slug: schema-snippet
88+
- page: Files
89+
path: ./pages/component-library/default-components/files.mdx
90+
icon: fa-duotone fa-folder-tree
91+
slug: files
8892
- page: Frame
8993
path: ./pages/component-library/default-components/frames.mdx
9094
icon: fa-duotone fa-window-maximize

‎fern/products/docs/pages/changelog/2025-11-09.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
## Files component for displaying file tree structures
2+
3+
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.
4+
5+
<Files>
6+
<Folder name="components" defaultOpen>
7+
<File name="accordion.mdx" />
8+
<File name="button.mdx" />
9+
<File name="card.mdx" />
10+
<File name="tabs.mdx" />
11+
</Folder>
12+
<Folder name="assets">
13+
<File name="styles.css" />
14+
</Folder>
15+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
16+
<File name="README.md" />
17+
</Files>
18+
19+
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.
20+
21+
```jsx Markdown maxLines=10
22+
<Files>
23+
<Folder name="components" defaultOpen>
24+
<File name="accordion.mdx" />
25+
<File name="button.mdx" />
26+
<File name="card.mdx" />
27+
<File name="tabs.mdx" />
28+
</Folder>
29+
<Folder name="assets">
30+
<File name="styles.css" />
31+
</Folder>
32+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
33+
<File name="README.md" />
34+
</Files>
35+
```
36+
37+
Read more in the [Files component documentation](/learn/docs/writing-content/components/files).

‎fern/products/docs/pages/component-library/default-components/files.mdx‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
---
2+
title: Files
3+
description: Display interactive file tree structures with expandable folders
4+
---
5+
6+
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.
7+
8+
The component consists of three parts: `<Files>` as the container, `<Folder>` for directories, and `<File>` for individual files.
9+
10+
## Usage
11+
12+
<div className="highlight-frame">
13+
<Files>
14+
<Folder name="components" defaultOpen>
15+
<File name="accordion.mdx" />
16+
<File name="button.mdx" />
17+
<File name="card.mdx" />
18+
<File name="tabs.mdx" />
19+
</Folder>
20+
<Folder name="assets">
21+
<File name="styles.css" />
22+
</Folder>
23+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
24+
<File name="README.md" />
25+
</Files>
26+
</div>
27+
28+
```jsx Markdown maxLines=10
29+
<Files>
30+
<Folder name="components" defaultOpen>
31+
<File name="accordion.mdx" />
32+
<File name="button.mdx" />
33+
<File name="card.mdx" />
34+
<File name="tabs.mdx" />
35+
</Folder>
36+
<Folder name="assets">
37+
<File name="styles.css" />
38+
</Folder>
39+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
40+
<File name="README.md" />
41+
</Files>
42+
```
43+
44+
## Variants
45+
46+
### Nested folders
47+
48+
You can nest folders within folders to create deep directory structures. The component automatically adds visual nesting lines to show the hierarchy.
49+
50+
<div className="highlight-frame">
51+
<Files>
52+
<Folder name="components" defaultOpen>
53+
<Folder name="layout" defaultOpen>
54+
<File name="header.mdx" />
55+
<File name="footer.mdx" />
56+
<File name="sidebar.mdx" />
57+
</Folder>
58+
<Folder name="ui">
59+
<File name="button.mdx" />
60+
<File name="card.mdx" />
61+
<File name="tabs.mdx" />
62+
</Folder>
63+
<File name="accordion.mdx" />
64+
</Folder>
65+
<Folder name="assets">
66+
<File name="styles.css" />
67+
</Folder>
68+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
69+
<File name="README.md" />
70+
</Files>
71+
</div>
72+
73+
```jsx Markdown maxLines=10
74+
<Files>
75+
<Folder name="components" defaultOpen>
76+
<Folder name="layout" defaultOpen>
77+
<File name="header.mdx" />
78+
<File name="footer.mdx" />
79+
<File name="sidebar.mdx" />
80+
</Folder>
81+
<Folder name="ui">
82+
<File name="button.mdx" />
83+
<File name="card.mdx" />
84+
<File name="tabs.mdx" />
85+
</Folder>
86+
<File name="accordion.mdx" />
87+
</Folder>
88+
<Folder name="assets">
89+
<File name="styles.css" />
90+
</Folder>
91+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
92+
<File name="README.md" />
93+
</Files>
94+
```
95+
96+
### Linked files and folders
97+
98+
Add the `href` property to make files or folders clickable. This is useful for linking to documentation pages, GitHub repositories, or other resources.
99+
100+
<div className="highlight-frame">
101+
<Files>
102+
<Folder name="components">
103+
<File name="accordion.mdx" href="/docs/writing-content/components/accordions" />
104+
<File name="button.mdx" href="/docs/writing-content/components/button" />
105+
<File name="card.mdx" href="/docs/writing-content/components/cards" />
106+
<File name="tabs.mdx" href="/docs/writing-content/components/tabs" />
107+
</Folder>
108+
<Folder name="assets">
109+
<File name="styles.css" href="https://github.com/fern-api/docs/blob/main/fern/assets/styles.css" />
110+
</Folder>
111+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
112+
<File name="README.md" href="https://github.com/fern-api/docs/blob/main/README.md" />
113+
</Files>
114+
</div>
115+
116+
```jsx Markdown maxLines=10
117+
<Files>
118+
<Folder name="components">
119+
<File name="accordion.mdx" href="/docs/writing-content/components/accordions" />
120+
<File name="button.mdx" href="/docs/writing-content/components/button" />
121+
<File name="card.mdx" href="/docs/writing-content/components/cards" />
122+
<File name="tabs.mdx" href="/docs/writing-content/components/tabs" />
123+
</Folder>
124+
<Folder name="assets">
125+
<File name="styles.css" href="https://github.com/fern-api/docs/blob/main/fern/assets/styles.css" />
126+
</Folder>
127+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
128+
<File name="README.md" href="https://github.com/fern-api/docs/blob/main/README.md" />
129+
</Files>
130+
```
131+
132+
### Default open folders
133+
134+
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.
135+
136+
<div className="highlight-frame">
137+
<Files>
138+
<Folder name="components" defaultOpen>
139+
<File name="accordion.mdx" />
140+
<File name="button.mdx" />
141+
<File name="card.mdx" />
142+
<File name="tabs.mdx" />
143+
</Folder>
144+
<Folder name="assets">
145+
<File name="styles.css" />
146+
</Folder>
147+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
148+
<File name="README.md" />
149+
</Files>
150+
</div>
151+
152+
```jsx Markdown maxLines=10
153+
<Files>
154+
<Folder name="components" defaultOpen>
155+
<File name="accordion.mdx" />
156+
<File name="button.mdx" />
157+
<File name="card.mdx" />
158+
<File name="tabs.mdx" />
159+
</Folder>
160+
<Folder name="assets">
161+
<File name="styles.css" />
162+
</Folder>
163+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
164+
<File name="README.md" />
165+
</Files>
166+
```
167+
168+
## Properties
169+
170+
### `<Files>` properties
171+
172+
<ParamField path="children" type="JSX" required={true}>
173+
The file tree content. Should contain `<Folder>` and `<File>` components.
174+
</ParamField>
175+
176+
<ParamField path="className" type="string" required={false}>
177+
Optional CSS class name for custom styling.
178+
</ParamField>
179+
180+
### `<Folder>` properties
181+
182+
<ParamField path="name" type="string" required={true}>
183+
The folder name to display.
184+
</ParamField>
185+
186+
<ParamField path="defaultOpen" type="boolean" default={false}>
187+
Whether the folder should be expanded when the page loads. If not specified, the folder will be collapsed by default.
188+
</ParamField>
189+
190+
<ParamField path="children" type="JSX" required={false}>
191+
The nested content within the folder. Can include `<File>` and other `<Folder>` components.
192+
</ParamField>
193+
194+
<ParamField path="href" type="string" required={false}>
195+
Optional URL to make the folder name clickable. The name will show an underline on hover when a link is provided.
196+
</ParamField>
197+
198+
<ParamField path="className" type="string" required={false}>
199+
Optional CSS class name for custom styling.
200+
</ParamField>
201+
202+
### `<File>` properties
203+
204+
<ParamField path="name" type="string" required={true}>
205+
The file name to display.
206+
</ParamField>
207+
208+
<ParamField path="href" type="string" required={false}>
209+
Optional URL to make the file name clickable. The name will show an underline on hover when a link is provided.
210+
</ParamField>
211+
212+
<ParamField path="className" type="string" required={false}>
213+
Optional CSS class name for custom styling.
214+
</ParamField>

‎fern/products/docs/pages/component-library/default-components/overview.mdx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: 'Components overview'
33
description: 'Built-in components for creating interactive documentation'
44
---
55

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

88
<CardGroup cols={3}>
99
<Card
@@ -97,6 +97,13 @@ Fern includes 21 built-in components for creating interactive documentation. Sel
9797
>
9898
Endpoint schema snippets from your API Reference
9999
</Card>
100+
<Card
101+
title="Files"
102+
icon="fa-duotone fa-folder-tree"
103+
href="/docs/writing-content/components/files"
104+
>
105+
Display interactive file tree structures with expandable folders
106+
</Card>
100107
<Card
101108
title="Frame"
102109
icon="fa-duotone fa-window-maximize"

0 commit comments

Comments
 (0)