Powerful, accessible tree components for React.

Website · Documentation · Examples · Playground

TreeKit is a TypeScript-first tree / checkbox-tree component for React. It ships with a polished default look, real WAI-ARIA tree semantics, cascading checkbox selection with proper indeterminate state, search, async loading, and a styling system you can override without touching a build config.

Live, not a mockup — checking React and Vue cascades their parents into indeterminate state. Try it yourself →

Why TreeKit

• Looks good with zero CSS — import one stylesheet and you have a modern, minimal tree.
• Real tri-state checkboxes — native <input type="checkbox"> with proper indeterminate, not a div painted to look like one.
• Configurable cascading — parent → children, children → parent, both, or neither.
• Actually accessible — role="tree"/treeitem, roving tabindex, full arrow-key navigation, tested with jest-axe.
• Controlled or uncontrolled — every piece of state (expandedIds, checkedIds, selectedIds) works either way.
• Headless-friendly — the same useTree hook that powers <TreeKit> is exported, so you can build a fully custom renderer on top of TreeKit's engine.
• Search, async loading, custom rendering, custom icons — all first-class, not bolted on.
• Small and dependency-free — ~7.3KB gzipped, no icon library, no CSS-in-JS runtime, no date/utility megapackage. react/react-dom are the only peer dependencies.

Installation

npm install @treekit-ui/core

pnpm add @treekit-ui/core

yarn add @treekit-ui/core

bun add @treekit-ui/core

Quick start

import { TreeKit, type TreeNode } from "@treekit-ui/core";
import "@treekit-ui/core/styles.css";

const data: TreeNode[] = [
  {
    id: "engineering",
    label: "Engineering",
    children: [
      { id: "frontend", label: "Frontend" },
      { id: "backend", label: "Backend" },
    ],
  },
  { id: "design", label: "Design" },
];

export function App() {
  return <TreeKit data={data} />;
}

That's it — you get a fully interactive, accessible tree with checkboxes, keyboard navigation, and cascading selection out of the box.

Checkbox tree with cascading selection

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

function PermissionsTree({ data }) {
  const [checkedIds, setCheckedIds] = useState<string[]>([]);

  return (
    <TreeKit
      data={data}
      checkedIds={checkedIds}
      onCheckedChange={setCheckedIds}
      selectionPropagation={{ toChildren: true, toParents: true }}
    />
  );
}

Checking "Engineering" checks every descendant; checking only some of a parent's children puts that parent into the native indeterminate state automatically.

Customization

TreeKit is styled entirely with CSS custom properties, scoped to .tk-tree — override them in your own stylesheet, no Tailwind or CSS-in-JS required:

.tk-tree {
  --tk-accent: #7c3aed;
  --tk-radius: 8px;
  --tk-row-height: 36px;
  --tk-indent: 20px;
}

Need full control over markup? Use renderNode:

<TreeKit
  data={data}
  renderNode={(ctx) => (
    <div onClick={ctx.toggleExpanded} style={{ paddingLeft: ctx.level * 16 }}>
      {ctx.hasChildren ? (ctx.expanded ? "📂" : "📁") : "📄"} {ctx.node.label}
    </div>
  )}
/>

See Customization in the docs for the full CSS variable reference, classNames slots, and variants (default / connected / compact / spacious / file-explorer).

Accessibility

TreeKit implements the WAI-ARIA Tree View pattern:

• role="tree" / role="treeitem" with aria-expanded, aria-selected, aria-disabled, aria-level, aria-posinset, aria-setsize.
• Roving tabindex with full keyboard support: ↑ ↓ ← → Home End Enter Space.
• Checkboxes are real <input type="checkbox"> elements with correct indeterminate state and aria-labelledby wiring — not custom widgets faking checkbox semantics.
• Animations respect prefers-reduced-motion automatically.

TypeScript

TreeKit is written in TypeScript with no any in its public surface. TreeNode<T> is generic, so you get full autocomplete on your own domain data:

interface FileMeta {
  sizeBytes: number;
}

const data: TreeNode<FileMeta>[] = [
  { id: "readme", label: "README.md", data: { sizeBytes: 1024 } },
];

Documentation

Full API reference, guides, and interactive examples: treekit.harshilsinh.dev

• Getting Started
• Core Concepts
• Features (search, async loading, disabled nodes, icons, animations…)
• Customization
• API Reference
• Examples (file explorer, permissions tree, searchable tree, large datasets…)
• Playground — tweak variants, cascading rules, and layout live, and copy the generated code

Contributing

Issues and pull requests are welcome at the GitHub repository. The documentation site lives in a separate repository and consumes this package as a normal npm dependency. To develop against a local, unpublished copy of this package (e.g. from the docs repo), use npm link:

npm install
npm run build
npm link              # registers this local build globally

# in the docs repo:
npm link @treekit-ui/core # symlinks it in, instead of installing from npm

npm install
npm test
npm run build

License

MIT © Harshilsinh Rajput