File Tree
Display hierarchical file and folder structure with expand/collapse functionality.
The FileTree component displays a hierarchical file system structure with expandable folders and file selection.
button.tsx
input.tsx
modal.tsx
app.tsx
main.tsx
package.json
tsconfig.json
README.md
Installation
npx ai-elements@latest add file-tree
Features
- Hierarchical folder structure
- Expand/collapse folders
- File selection with callback
- Keyboard accessible
- Customizable icons
- Controlled and uncontrolled modes
Examples
Basic Usage
package.json
With Selection
package.json
Default Expanded
button.tsx
input.tsx
index.ts
Props
<FileTree />
Prop
Type
<FileTreeFolder />
Prop
Type
<FileTreeFile />
Prop
Type
Subcomponents
FileTreeIcon- Icon wrapperFileTreeName- Name textFileTreeActions- Action buttons container (stops click propagation)