A hierarchical, keyboard-navigable tree view for file explorers, nav menus, or category pickers, with support for selection, multi-select checkboxes, expand/collapse, icons, badges, and async-loaded children.
"use client";
import * as React from "react";
import {
Tree,
TreeItem,
TreeItemLabel,
type TreeNode,
} from "@/components/ui/tree";
const data: TreeNode[] = [
{
id: "src",
name: "src",
children: [
{
id: "components",
name: "components",
children: [
{ id: "button.tsx", name: "button.tsx" },
{ id: "input.tsx", name: "input.tsx" },
],
},
{ id: "app.tsx", name: "app.tsx" },
],
},
{ id: "package.json", name: "package.json" },
];
export default function TreeDemo() {
const [selected, setSelected] = React.useState<string | null>("app.tsx");
return (
<div className="w-full max-w-xs">
<Tree
data={data}
selectedNode={selected}
onNodeSelect={setSelected}
defaultExpanded={["src", "components"]}
>
{(item) => (
<TreeItem>
<TreeItemLabel>{item.name}</TreeItemLabel>
</TreeItem>
)}
</Tree>
</div>
);
}