TreeKit

What It Is

A TypeScript-first React component library for rendering hierarchical/tree data with first-class checkbox selection — the kind of UI used for file explorers, permission trees, category pickers, and nested multi-select forms.

The Problem It Solves

Most tree-view packages on npm hand you a bare hierarchy renderer and leave selection logic, keyboard navigation, and styling entirely up to you. TreeKit treats cascading checkbox selection, correct tri-state (indeterminate) behavior, keyboard accessibility, and a polished default appearance as core requirements, not optional extras — so it works out of the box instead of being a starting point for weeks of custom work.

Key Features

• Cascading checkbox selection with real indeterminate state — actual native <input type="checkbox"> elements using the DOM's indeterminate property, not a styled div faking it
• Configurable propagation: checking a parent can cascade to children, checking children can bubble up to parents, both, or neither
• Controlled or uncontrolled API for expansion, checked state, and selection — React-idiomatic, your choice per use case
• Full WAI-ARIA tree semantics — roving tabindex, complete keyboard navigation, verified with automated jest-axe accessibility tests
• Search/filtering, async/lazy-loaded children, disabled nodes, and fully custom row rendering via renderNode
• Virtualized rendering for large trees — smoothly handles thousands of nodes
• A CSS custom-property theming system with 5 built-in variants and dark mode support, instead of a stylesheet you have to fight
• A headless useTree hook exposing the same pure tree-math engine the component uses internally, for anyone who needs a fully custom UI on the same logic

How It's Built

• TypeScript with no `any` in the public API; ships its own type declarations
• Architecturally separates "tree math" from rendering — cascading selection, indeterminate computation, and visible-node flattening are pure, independently unit-tested functions, with the React layer as a thin consumer
• Zero runtime dependencies beyond React itself (18+, including React 19) — no bundled icon library, no CSS-in-JS
• ~7.3KB gzipped
• MIT licensed
• CI via GitHub Actions — typecheck, lint, test, and build on every push

Documentation Site

A full documentation website built with Next.js 15, Tailwind CSS, Vercel, deployed independently from the library itself.