Permissions Tree

The canonical checkbox-tree use case: grant access by category, lock down anything too dangerous to bulk-toggle.

Show code

const data = [
  {
    id: "users",
    label: "User Management",
    children: [
      { id: "users.view", label: "View users" },
      { id: "users.invite", label: "Invite users" },
      { id: "users.remove", label: "Remove users", disabled: true },
    ],
  },
  // ...billing, settings...
];

<TreeKit
  data={data}
  defaultExpandedIds={["billing", "users", "settings"]}
  defaultCheckedIds={["billing.view"]}
/>

"Remove users" and "Danger zone" are permanently disabled here, but this is exactly the shape you'd drive from a real permissions API — see Disabled Nodes.