avatar
UI
Components
Changelog
LobeHub UI
Antd Components
Lucide Icons
CSSinJS
Ctrl
K
Chat
ChatInputArea
ChatItem
EditableMessage
Data Display
Card
ChatMarkdown
CollapseGroup
Descriptions
Highlighter
JsonViewer
LogViewer
ProCard
RichTextEditor
Status
Table
Tree
Data Entry
CodeEditor
Form
Mentions
MonacoEditor
SelectCard
SliderInput
Feedback
Alert
DragPanel
Drawer
Modal
Notification
General
Breadcrumb
Typography
WaveformIcon
Layout
Divider
Page
Navigation
ButtonGroup
Dropdown
Theme
ConfigProvider
Logo
TTS
useSpeechSynthes
Utils
FormHelper

Tree

The Tree component is a list of multi-level structures.

import { Tree } from '@yuntijs/ui';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
Source
Edit
Previous
Table
Next
CodeEditor

Resources

Lobe UI-AIGC Components
Lobe Icon-AI / LLM Icon Collection
Lobe Charts-Modern Charts
Lobe TTS-TTS / STT Library

Community

Report Bug
Request Feature

Help

GitHub
Changelog

More Products

🤯 Lobe Chat-AI / LLM Chat Framework
🧸 Lobe Vidol-Virtual Idols for EveryOne
🅰️ Lobe Theme-Stable Diffusion Extension
🌐 Lobe i18n-AI i18next CLI
Copyright © 2022-2026
Made with ☁️ by YuntiJS
LobeHub

Antd Document

Default

APIs

NameDescriptionTypeDefault
showLine--boolean|{showLeafIcon?:boolean|TreeLeafIcon}--
className--string--
multipleWhether to support multiple selectionboolean--
autoExpandParentWhether to automatically expand the parent nodeboolean--
checkStrictlyNode selection in Checkable state is fully controlled (the selected state of parent and child nodes is no longer associated)boolean--
checkableWhether to support selectionboolean--
disabledwhether to disable the treeboolean--
defaultExpandAllExpand all tree nodes by defaultboolean--
defaultExpandParentExpand the corresponding tree node by defaultboolean--
defaultExpandedKeysExpand the specified tree node by defaultany[]--
expandedKeys(Controlled) Expand the specified tree nodeany[]--
checkedKeys(Controlled) Tree node with checked checkboxArray|{checked:Key[];halfChecked:Key[]}--
defaultCheckedKeysTree node with checkbox checked by defaultany[]--
selectedKeys(Controlled) Set the selected tree nodeany[]--
defaultSelectedKeysTree node selected by defaultany[]--
selectable--boolean--
filterAntTreeNodeClick on the tree node to trigger(node:import("/node_modules/antd/es/tree/Tree").AntTreeNode)=>boolean--
loadedKeys--any[]--
draggableSet the node to be draggable (IE>8)DraggableFn|boolean|DraggableConfig--
style--{}--
showIcon--boolean--
icon--|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|(props:import("/node_modules/antd/es/tree/Tree").AntdTreeNodeAttribute)=>|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|boolean|boolean--
switcherIcon--|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|(props:import("/node_modules/antd/es/tree/Tree").AntTreeNodeProps)=>|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|boolean|boolean--
switcherLoadingIcon--ReactNode--
prefixCls--string--
children--ReactNode--
blockNode--boolean--
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).any--
key--Key|any--
parent 1
parent 1-0
leaf
leaf
parent 1-1
sss