Basic Tree
Just a hierarchy — the starting point for everything else in these examples.
Engineering
Frontend
Backend
Platform
Design
Marketing
Show code
import { TreeKit } from "@treekit-ui/core";
import "@treekit-ui/core/styles.css";
const data = [
{
id: "engineering",
label: "Engineering",
children: [
{
id: "frontend",
label: "Frontend",
children: [
{ id: "react", label: "React" },
{ id: "vue", label: "Vue" },
{ id: "svelte", label: "Svelte" },
],
},
{ id: "backend", label: "Backend" },
],
},
{ id: "design", label: "Design" },
];
export function OrgTree() {
return <TreeKit data={data} defaultExpandedIds={["engineering"]} aria-label="Organization" />;
}Continue to Quick Start or the Checkbox Tree example to add selection.