127 Components
File Tree
NavigationHierarchical file and folder explorer with animated expand/collapse transitions, instant file search filtering, and active path tracking.
src/components/ui/FileTree.tsx
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/file-tree.json"
Props
TypeScript props supported by <FileTree />.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | FileTreeNode[] | — | Hierarchical array of folder and file nodes. |
| defaultExpandedIds | string[] | ["src", "src/components"] | Array of folder IDs expanded on initial render. |
| defaultSelectedId | string | — | ID of the initially highlighted file or folder. |
| onSelect | (node: FileTreeNode) => void | — | Callback fired when a file or folder item is clicked. |
| searchable | boolean | true | Renders an instant filter input at the top of the tree. |
Key Features
- Recursive nested folders with smooth Framer Motion height transitions.
- Built-in instant search bar that auto-expands matching file paths.
- Supports custom badges, file type icons, and selection callbacks.
Keyboard & Accessibility
- Uses semantic role='tree', role='treeitem', and role='group' attributes.
- Announces folder open/close state via aria-expanded and selection via aria-selected.
- Respects prefers-reduced-motion when expanding or collapsing directories.