File Tree
Display directory structures as visual trees.
The FileTree component displays file and directory structures. Useful for showing project layouts and content organization.
Basic Usage
- src
- index.ts
- utils.ts
- package.json
<FileTree>
<Folder name="src">
<File name="index.ts" />
<File name="utils.ts" />
</Folder>
<File name="package.json" />
</FileTree>Nested Structure
- app
- layout.tsx
- page.tsx
- docs
- layout.tsx
- [[...slug]]
- page.tsx
- api
- health
- route.ts
Props
FileTree
Wrapper component. Accepts children of Folder and File components.
Folder
| Prop | Type | Description |
|---|---|---|
name | string | Directory name |
File
| Prop | Type | Description |
|---|---|---|
name | string | File name |