Tree and Tree.DirectoryTree install into your project as a file you own. They take the same props as Ant Design's and add none. switcherIcon defaults to your icon pack's chevron, which rotates as a row opens, and DirectoryTree gets its file and folder icons from the pack. Both are marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add tree
The first command sets up AntuikitProvider and the theme tokens, and the second adds Tree.
Import
Import from @/components/ui/tree, not from antd. Once installed, the file lives in your project.
import { Tree } from "@/components/ui/tree"
The axes
Three props take more than a boolean and are worth knowing before you write the markup.
expandAction takes false, click or doubleClick, and only DirectoryTree reads it. false leaves expanding to the switcher.
showLine takes a boolean or { showLeafIcon }, where the leaf icon is a boolean, a node or a render function.
draggable takes a boolean, a (node) => boolean function, or { icon, nodeDraggable }, where icon: false removes the grip.
checkStrictly changes the type of the checked value: checkedKeys and onCheck use { checked, halfChecked } instead of an array of keys.
Flags
Twelve booleans. Four of them are already true.
selectable, focusable and virtual default to true. focusable={false} takes the tree out of the tab order, and virtual does nothing until you pass height.
defaultExpandParent is also true and opens the parents of your default keys once. autoExpandParent is false and does it on every change.
checkable, checkStrictly, multiple, showLine, showIcon, blockNode, defaultExpandAll and disabled are off.
When you do not pass disabled, a disabled form or provider above the tree disables it too.
Slots
The props that take a node. Use them before a descendant selector.
titleRender renders every row's title. Keep readable text inside it, since a row only gets a native tooltip when the node's title is a string.
icon and switcherIcon take a node or a function of the node. Use the function form for switcherIcon, since a plain node replaces the default and does not rotate.
switcherLoadingIcon replaces the spinner shown while loadData loads a branch.
checkable renders a node inside the checkbox when you pass one instead of true. Put nothing focusable in it.
draggable's object form takes the grip icon.
children is the older Tree.TreeNode form, which the kit does not re-export. Use treeData.
1
// A function keeps the rotation. A node is drawn as is and does not turn.
Tree.DirectoryTree is Tree set up as a file browser. It takes the same props and changes four defaults.
showIcon is on, with file, folder and folder-open from your icon pack. Pass your own icon to replace them.
blockNode is on, so the whole row is clickable.
expandAction is click, so clicking a folder name opens it.
The selected row uses the primary color rather than the light fill of a plain Tree.
1
import { Tree } from "@/components/ui/tree"
2
3
<Tree.DirectoryTree multiple treeData={nodes} />
Events
onSelect
onCheck
onExpand
onLoad
onDoubleClick
onRightClick
onDragStart, onDragEnter, onDragOver, onDragLeave, onDragEnd and onDrop
Styling
classNames and styles take the same keys. Use them before a descendant selector.
1
<Tree
2
classNames={{
3
root: "…",
4
item: "…",
5
itemIcon: "…",
6
itemTitle: "…",
7
itemSwitcher: "…",
8
}}
9
/>
A Tailwind class on one of these keys wins over the component's own styles without !important. Setting a component token's CSS variable on the root does nothing, so style the part instead.
API Reference
Tree
Tree's props. Rows marked antuikit in the Version column are added by the kit.
Tree.DirectoryTree
Tree.DirectoryTree's props, on top of Tree's. Rows marked antuikit in the Version column are added by the kit.