Skip to content

Commit 62bdf26

Browse files
devin-ai-integration[bot]chdeskur
devin-ai-integration[bot]
and
chdeskur
committed
docs: add Files UI component documentation
Co-Authored-By: Catherine Deskur <[email protected]>
1 parent cfb604b commit 62bdf26

File tree

1 file changed

+182
-0
lines changed
  • fern/products/docs/pages/component-library/default-components

1 file changed

+182
-0
lines changed

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

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
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="app" defaultOpen>
15+
<File name="layout.tsx" />
16+
<File name="page.tsx" />
17+
<File name="global.css" />
18+
</Folder>
19+
<Folder name="components">
20+
<File name="button.tsx" />
21+
<File name="tabs.tsx" />
22+
</Folder>
23+
<File name="package.json" />
24+
</Files>
25+
</div>
26+
27+
```jsx Markdown
28+
<Files>
29+
<Folder name="app" defaultOpen>
30+
<File name="layout.tsx" />
31+
<File name="page.tsx" />
32+
<File name="global.css" />
33+
</Folder>
34+
<Folder name="components">
35+
<File name="button.tsx" />
36+
<File name="tabs.tsx" />
37+
</Folder>
38+
<File name="package.json" />
39+
</Files>
40+
```
41+
42+
## Variants
43+
44+
### Nested folders
45+
46+
You can nest folders within folders to create deep directory structures. The component automatically adds visual nesting lines to show the hierarchy.
47+
48+
<div className="highlight-frame">
49+
<Files>
50+
<Folder name="src" defaultOpen>
51+
<Folder name="components" defaultOpen>
52+
<Folder name="ui">
53+
<File name="button.tsx" />
54+
<File name="input.tsx" />
55+
</Folder>
56+
<File name="header.tsx" />
57+
</Folder>
58+
<Folder name="lib">
59+
<File name="utils.ts" />
60+
</Folder>
61+
</Folder>
62+
<File name="package.json" />
63+
</Files>
64+
</div>
65+
66+
```jsx Markdown
67+
<Files>
68+
<Folder name="src" defaultOpen>
69+
<Folder name="components" defaultOpen>
70+
<Folder name="ui">
71+
<File name="button.tsx" />
72+
<File name="input.tsx" />
73+
</Folder>
74+
<File name="header.tsx" />
75+
</Folder>
76+
<Folder name="lib">
77+
<File name="utils.ts" />
78+
</Folder>
79+
</Folder>
80+
<File name="package.json" />
81+
</Files>
82+
```
83+
84+
### Linked files and folders
85+
86+
Add the `href` property to make files or folders clickable. This is useful for linking to GitHub repositories, documentation pages, or other resources.
87+
88+
<div className="highlight-frame">
89+
<Files>
90+
<Folder name="src" defaultOpen href="https://github.com/example/repo/tree/main/src">
91+
<File name="index.ts" href="https://github.com/example/repo/blob/main/src/index.ts" />
92+
<File name="utils.ts" href="https://github.com/example/repo/blob/main/src/utils.ts" />
93+
</Folder>
94+
<File name="README.md" href="https://github.com/example/repo/blob/main/README.md" />
95+
</Files>
96+
</div>
97+
98+
```jsx Markdown
99+
<Files>
100+
<Folder name="src" defaultOpen href="https://github.com/example/repo/tree/main/src">
101+
<File name="index.ts" href="https://github.com/example/repo/blob/main/src/index.ts" />
102+
<File name="utils.ts" href="https://github.com/example/repo/blob/main/src/utils.ts" />
103+
</Folder>
104+
<File name="README.md" href="https://github.com/example/repo/blob/main/README.md" />
105+
</Files>
106+
```
107+
108+
### Default open folders
109+
110+
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.
111+
112+
<div className="highlight-frame">
113+
<Files>
114+
<Folder name="src" defaultOpen>
115+
<File name="index.ts" />
116+
<File name="app.ts" />
117+
</Folder>
118+
<Folder name="tests">
119+
<File name="app.test.ts" />
120+
</Folder>
121+
</Files>
122+
</div>
123+
124+
```jsx Markdown
125+
<Files>
126+
<Folder name="src" defaultOpen>
127+
<File name="index.ts" />
128+
<File name="app.ts" />
129+
</Folder>
130+
<Folder name="tests">
131+
<File name="app.test.ts" />
132+
</Folder>
133+
</Files>
134+
```
135+
136+
## Properties
137+
138+
### `<Files>` properties
139+
140+
<ParamField path="children" type="JSX" required={true}>
141+
The file tree content. Should contain `<Folder>` and `<File>` components.
142+
</ParamField>
143+
144+
<ParamField path="className" type="string" required={false}>
145+
Optional CSS class name for custom styling.
146+
</ParamField>
147+
148+
### `<Folder>` properties
149+
150+
<ParamField path="name" type="string" required={true}>
151+
The folder name to display.
152+
</ParamField>
153+
154+
<ParamField path="defaultOpen" type="boolean" default={false}>
155+
Whether the folder should be expanded when the page loads. If not specified, the folder will be collapsed by default.
156+
</ParamField>
157+
158+
<ParamField path="children" type="JSX" required={false}>
159+
The nested content within the folder. Can include `<File>` and other `<Folder>` components.
160+
</ParamField>
161+
162+
<ParamField path="href" type="string" required={false}>
163+
Optional URL to make the folder name clickable. The name will show an underline on hover when a link is provided.
164+
</ParamField>
165+
166+
<ParamField path="className" type="string" required={false}>
167+
Optional CSS class name for custom styling.
168+
</ParamField>
169+
170+
### `<File>` properties
171+
172+
<ParamField path="name" type="string" required={true}>
173+
The file name to display.
174+
</ParamField>
175+
176+
<ParamField path="href" type="string" required={false}>
177+
Optional URL to make the file name clickable. The name will show an underline on hover when a link is provided.
178+
</ParamField>
179+
180+
<ParamField path="className" type="string" required={false}>
181+
Optional CSS class name for custom styling.
182+
</ParamField>

0 commit comments

Comments
 (0)