A file explorer tree with animated folders, colored file type icons, a filter field and the full tree keyboard model.
npx shadcn@latest add https://hyperblur.dev/r/sidebar-tree.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-tree.tsx.
import { SidebarTree } from "@/components/hyperblur/sidebar-tree"
<div style={{ height: 420, width: 260 }}><SidebarTree filterable onSelect={(id) => console.log(id)} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | { id: string; name: string; children?: SidebarTreeNode[] }[] | sample project | Tree data. A node with a `children` array is a folder, any other node is a file. Icons follow the file extension. |
| selected | string | null | Controlled selected node id. Pair with onSelect. | |
| defaultSelected | string | null | null | Initial selected node id when uncontrolled. |
| onSelect | (id: string, node: SidebarTreeNode) => void | Called when a row is chosen with a click, Enter or Space. | |
| expanded | string[] | Controlled list of open folder ids. Pair with onExpandedChange. | |
| defaultExpanded | string[] | [] | Folders that start open when uncontrolled. The built-in sample project opens app and components. |
| onExpandedChange | (ids: string[]) => void | Called when a folder opens or closes. | |
| filterable | boolean | false | Show a filter field. Matching files stay visible with their folders open. |
| placeholder | string | "Filter files" | Placeholder and accessible label of the filter field. |
| title | string | "Explorer" | Heading above the tree. Pass an empty string to hide it. |
| rowHeight | number | 26 | Height of each row in pixels. |
| indent | number | 14 | Indentation per level in pixels. |
| color | string | "#2f7bff" | Accent color for the selected row, focus rings and filter field. |