Powerful, accessible tree components for React.
Cascading checkbox selection, real indeterminate state, search, keyboard accessibility, and a CSS-variable styling system — production-ready the moment you install it.
Everything a tree component needs, nothing it doesn't.
TreeKit handles the genuinely hard parts of tree UIs — cascading selection math, keyboard semantics, virtualization-friendly rendering — so you can focus on your data.
Real tri-state checkboxes
Native <input type="checkbox"> with proper indeterminate state — not a div pretending to be one.
Configurable cascading
Parent→children, children→parent, both, or neither. You choose the propagation model.
Actually accessible
role="tree"/treeitem, roving tabindex, full arrow-key navigation — verified with jest-axe.
Controlled or uncontrolled
expandedIds, checkedIds, selectedIds all work either way — TreeKit never forces a pattern on you.
Search built in
Case-insensitive by default, fully overridable, with automatic ancestor-reveal and match highlighting.
Async & lazy loading
onLoadChildren returns a promise — TreeKit handles loading and error states, you handle the fetch.
Style with CSS variables
One stylesheet, fully themeable via custom properties. No Tailwind, no CSS-in-JS runtime required.
TypeScript-first
TreeNode<T> is generic — attach your own domain data and get full autocomplete, no any in the public API.
Yours to restyle, top to bottom.
Every color, radius, and spacing value is a CSS custom property scoped to .tk-tree. Override them in a plain stylesheet — no Tailwind config, no CSS-in-JS runtime, no build step required.
Up and running in under a minute.
One component, one stylesheet import. No providers, no context setup required for the uncontrolled case.
import { TreeKit } from "@treekit-ui/core";
import "@treekit-ui/core/styles.css";
const data = [
{
id: "engineering",
label: "Engineering",
children: [
{ id: "frontend", label: "Frontend" },
{ id: "backend", label: "Backend" },
],
},
];
export function App() {
return <TreeKit data={data} />;
}