esc
↑↓ navigate↵ select

Frequently Asked Questions

What TreeKit supports, what it deliberately doesn't, and the practical details that come up most.

Does TreeKit support drag and drop?

No. TreeKit does not have built-in drag-and-drop, node reordering, or drag-to-move-between-parents functionality. There is no dragHandlers prop, no onReorder callback, and nothing related to drag/drop in the public API. If you need this, you'd need to build it yourself on top of renderNode (or the headless useTree hook) combined with a drag-and-drop library of your choice (e.g. dnd-kit) — TreeKit doesn't prevent that, but it provides no built-in support for it.

Does TreeKit work with Vue, Angular, or Svelte?

No. TreeKit is a React component library — its only peer dependencies are react and react-dom (>=18.0.0; React 19 is also supported). It is built with React hooks and JSX internally and has no Vue, Angular, or Svelte build target or adapter.

Do I need Tailwind CSS to use TreeKit?

No. TreeKit's own stylesheet is plain CSS using custom properties (CSS variables) scoped to .tk-tree — no Tailwind, no CSS-in-JS runtime, no build-time theming step. You import one stylesheet (@treekit-ui/core/styles.css) and override CSS variables in your own plain CSS if you want to customize it. If your app happens to use Tailwind, that's fine too — TreeKit doesn't conflict with it, but it's never a requirement.

How big is TreeKit?

The ESM build (dist/index.js) is approximately 7.3KB gzipped, measured directly from the package's own build output. There is no icon library, no CSS-in-JS runtime, and no date/utility megapackage bundled — react and react-dom are the only peer dependencies (not bundled dependencies).

What license is TreeKit under?

TreeKit is released under the MIT License.

Does TreeKit come with its own icon set?

No. TreeKit does not bundle or require any icon library. The default chevron is a small inline SVG with no dependency. For anything else (leaf icons, folder icons, etc.) you pass a ReactNode via the "icons" prop or per-node "icon" field — this composes with any icon library you already use (lucide-react, @radix-ui/react-icons, etc.) or plain emoji/SVG, since TreeKit only needs a ReactNode, not a specific component API.

Read more in Icons →

Does TreeKit support a right-click context menu?

There is no built-in context-menu prop or API (no onContextMenu shorthand, no built-in menu component). It's achievable yourself: renderNode gives you the full row markup, so you can attach your own onContextMenu handler and render your own menu component inside it — TreeKit just doesn't provide this out of the box.

Can users rename a node inline (edit the label)?

No, there is no built-in inline-rename / editable-label feature. TreeKit renders "label" as static text in the default renderer. You could build this yourself with renderNode (rendering an <input> conditionally for the node being edited) combined with your own state for which node is in edit mode, but TreeKit has no dedicated API for it.

Does TreeKit have undo/redo?

No. TreeKit has no built-in undo/redo or history stack. Since all state (expandedIds, checkedIds, selectedIds) can be controlled by you, you can implement undo/redo yourself at the application level (e.g. keeping a history array of past checkedIds values), but TreeKit provides no dedicated API for it.

Can TreeKit render a multi-column table/grid layout?

TreeKit is a tree/checkbox-tree, not a data-grid — it renders one row per node, not resizable/sortable columns. That said, since "renderNode" gives you full control of a row's markup, you can lay out multiple "columns" of content WITHIN a single row (e.g. label, size, date side by side via flexbox) — the custom-nodes example does exactly this for file sizes. There is no built-in column header, resize, or sort-by-column system.

Read more in Custom Rendering →

Does TreeKit sort nodes automatically?

No. TreeKit renders nodes in exactly the order they appear in your "data" array (and each node's "children" array). There is no built-in sortBy/comparator prop — if you want alphabetical or custom ordering, sort your data before passing it to "data".

Can search find nodes that haven't been lazy-loaded yet?

Search (searchValue/filterFn) only operates on data currently in the tree — a node whose children are lazy-loaded via onLoadChildren and haven't been fetched yet (still just hasChildren: true with no children array) can't be matched by search until that branch is actually loaded. This is a real limitation of combining search with async loading, not a bug.

Read more in Search →

Is TreeKit written in TypeScript?

Yes. TreeKit is written in TypeScript with no "any" in its public surface. TreeNode<T> is generic, so custom domain data gets full autocomplete. The package ships its own type declarations — no separate @types package needed.

Which React versions does TreeKit support?

TreeKit's peer dependencies are react and react-dom, both ">=18.0.0". React 19 is explicitly supported.

Don't see your question? Browse the full documentation, or use the assistant in the bottom-right corner.