# antuikit / Tree

> Tree with the expand chevron from your icon pack, and `Tree.DirectoryTree` with folder and file icons from it.

Docs: https://antuikit.com/docs/components/tree

## Install

npx antuikit@latest init
npx antuikit@latest add tree

## Import

import { Tree } from "@/components/ui/tree";

## Demos

- [Basic](https://ui.antuikit.com/embed/tree/basic.md): Pass `treeData` and add `checkable` for checkboxes, with `disabled` or `disableCheckbox` on nodes people cannot change, like a locked folder.
- [Controlled](https://ui.antuikit.com/embed/tree/controlled.md): Keep `expandedKeys`, `checkedKeys` and `selectedKeys` in your own state, updated from `onExpand`, `onCheck` and `onSelect`.
- [Line](https://ui.antuikit.com/embed/tree/line.md): Add `showLine` to draw guide lines that connect each node to its parent.
- [Leaf icon](https://ui.antuikit.com/embed/tree/leaf-icon.md): Pass `showLine` an object with `showLeafIcon` to put an icon at the end of each leaf's guide line, like a file icon.
- [Icons](https://ui.antuikit.com/embed/tree/icons.md): Add `showIcon` and give each node an `icon`, like a folder for branches and a file for leaves.
- [Directory](https://ui.antuikit.com/embed/tree/directory.md): Use `Tree.DirectoryTree` for a file browser that selects the whole row and shows folder and file icons, with `multiple` for several files.
- [Draggable](https://ui.antuikit.com/embed/tree/draggable.md): Add `draggable` and handle `onDrop` to move nodes, dropping one onto a folder to nest it or between rows to reorder.
- [Load on expand](https://ui.antuikit.com/embed/tree/async.md): Pass `loadData` to fetch a folder's children the first time it opens, with a spinner while they load.
- [Search](https://ui.antuikit.com/embed/tree/search.md): Filter the tree from an `Input`, highlight the matching text and open the folders that contain a match with `expandedKeys`.
- [Virtual scroll](https://ui.antuikit.com/embed/tree/virtual.md): Set `height` to render only the visible rows, so a tree of a thousand nodes scrolls inside a fixed box.
- [Block node](https://ui.antuikit.com/embed/tree/block-node.md): Add `blockNode` so each row's highlight and click area fill the full width of the tree.
- [Check strictly](https://ui.antuikit.com/embed/tree/check-strictly.md): Set `checkStrictly` so checking a folder leaves its files alone, and each node is checked on its own.
- [Expand and collapse all](https://ui.antuikit.com/embed/tree/expand-collapse-all.md): Set `expandedKeys` from two buttons to open every folder at once or close them all.
- [Project files](https://ui.antuikit.com/embed/tree/file-explorer.md): A project files card with a directory tree where you add a folder, rename a row in place and delete one after a confirm.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/tree`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Tree` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.