A composable, searchable FileTree component for React. Built with Radix UI and designed for shadcn/ui.
- Composable API with
FileTree,Folder,File, andFileTreeSearchcomponents - Built-in fuzzy search that filters and auto-expands matching results
- Keyboard accessible via Radix Accordion primitives
- Customizable icons per file
- Smooth expand/collapse animations
- Fully typed with TypeScript
npx shadcn@latest add https://filetree.sachi.dev/r/file-tree.jsonimport { FileTree, FileTreeSearch, Folder, File } from "@/components/file-tree"
export function MyFileTree() {
return (
<FileTree defaultExpanded={["src"]} defaultSelected="page.tsx">
<FileTreeSearch placeholder="Search files..." />
<Folder id="src" label="src">
<Folder id="app" label="app">
<File label="page.tsx" />
<File label="layout.tsx" />
</Folder>
<Folder id="components" label="components">
<File label="file-tree.tsx" />
</Folder>
</Folder>
<File label="package.json" />
</FileTree>
)
}Root component that provides context for the tree.
| Prop | Type | Description |
|---|---|---|
defaultExpanded |
string[] |
IDs of folders to expand by default |
defaultSelected |
string |
ID of the file to select by default |
Optional search input that filters the tree.
| Prop | Type | Description |
|---|---|---|
onValueChange |
(value: string) => void |
Callback when search value changes |
placeholder |
string |
Input placeholder text |
A collapsible folder node.
| Prop | Type | Description |
|---|---|---|
id |
string |
Unique identifier for the folder |
label |
string |
Display name |
A selectable file node.
| Prop | Type | Description |
|---|---|---|
label |
string |
Display name |
id |
string |
Optional unique identifier (defaults to label) |
icon |
ReactNode |
Custom icon (defaults to FileIcon) |
bun install
bun devMIT