esc
navigate select

Basic Tree

Just a hierarchy — the starting point for everything else in these examples.

Engineering
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.