Tree View
File-explorer style tree with expand/collapse and full keyboard navigation.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/tree-view.jsonUsage
import { TreeView, type TreeNode } from "@/components/ui/tree-view";
const files: TreeNode[] = [
{
id: "src",
label: "src",
icon: <FolderOpen />,
children: [{ id: "app", label: "app.tsx", icon: <FileText /> }],
},
];
<TreeView
data={files}
defaultExpanded={["src"]}
onSelect={(id) => openFile(id)}
/>Props
| Prop | Type | Default |
|---|---|---|
data | TreeNode[] ({ id, label, icon?, children? }) | required |
defaultExpanded | string[] | [] |
selected / onSelect | controlled selection | — |
Accessibility
- Proper
tree/treeitem/grouproles witharia-expandedandaria-selected. - Keyboard: Up/Down move, Right expands, Left collapses or jumps to the parent, Enter/Space selects.