Quick Start

From zero to a working checkbox tree.

1. Shape your data

TreeKit works with a plain array of TreeNode objects. Each node needs an id (unique across the whole tree) and a label; nesting is just a children array:

data.ts

const data = [
  {
    id: "engineering",
    label: "Engineering",
    children: [
      {
        id: "frontend",
        label: "Frontend",
        children: [
          { id: "react", label: "React" },
          { id: "vue", label: "Vue" },
        ],
      },
      { id: "backend", label: "Backend" },
    ],
  },
];

2. Render it

Pass data to <TreeKit />. To manage checkbox state yourself (so you can read it elsewhere in your app), pass checkedIds and onCheckedChange — this is the standard React controlled-component pattern:

OrgChart.tsx

import { useState } from "react";
import { TreeKit } from "@treekit-ui/core";
import "@treekit-ui/core/styles.css";

const data = [/* ...as above... */];

export function OrgChart() {
  const [checkedIds, setCheckedIds] = useState<string[]>(["react"]);

  return (
    <TreeKit
      data={data}
      defaultExpandedIds={["engineering", "frontend"]}
      checkedIds={checkedIds}
      onCheckedChange={setCheckedIds}
    />
  );
}

Show code

<TreeKit
  data={data}
  defaultExpandedIds={["engineering", "frontend"]}
  checkedIds={checkedIds}
  onCheckedChange={setCheckedIds}
/>

Check "Frontend" and notice "React" and "Vue" check automatically; uncheck one of them and "Frontend" becomes indeterminate. This is TreeKit's default cascading behavior — see Selection to configure it.

Tip

Don't need to read checkbox state elsewhere? Skip the useState entirely and use defaultCheckedIds instead — see Uncontrolled State.

Next steps

Tree Data — the full TreeNode<T> shape, including custom data and disabled nodes.
Selection — configuring cascade behavior in depth.
Styling — the full CSS variable reference.

← PreviousInstallation Next →Basic Usage