An accessible, keyboard-navigable tree for browsing nested data like folders and files, with expand/collapse, selection and full arrow-key/Home/End support.
import TreeView from "@/components/ui/tree-view";
import { Surface, Tag } from "klyvui";
import { Folder, FileText, Wallet } from "lucide-react";
import { useState } from "react";
export default function TreeViewDemo() {
const [selected, setSelected] = useState("current");
return (
<Surface variant="card" padding="md" className="w-full max-w-[340px]">
<TreeView
label="Accounts"
selected={selected}
onSelect={setSelected}
defaultExpanded={["personal"]}
nodes={[
{
id: "personal",
label: "Personal",
icon: Folder,
children: [
{
id: "current",
label: "Current account",
icon: Wallet,
meta: <Tag size="sm">£8.4k</Tag>,
},
{ id: "savings", label: "Savings", icon: Wallet },
{
id: "statements",
label: "Statements",
icon: Folder,
children: [
{ id: "sep", label: "September 2026", icon: FileText },
{ id: "oct", label: "October 2026", icon: FileText },
],
},
],
},
{
id: "business",
label: "Business",
icon: Folder,
children: [
{ id: "trading", label: "Trading account", icon: Wallet },
],
},
]}
/>
</Surface>
);
}