Tree
Data Display
Hierarchical tree view with lazy loading, selection, expansion control, and custom node rendering
Basic Usage
Hierarchical tree structure for displaying nested data.
src
components
Button.tsx
Card.tsx
utils
public
Collapsed by Default
src
Variants
Bordered
Folder
File 1
File 2
Glass
Documents
Report.pdf
Notes.txt
Minimal
Root
Item 1
Item 2
Sizes
Small
Small Tree
Child Item
Large
Large Tree
Child Item
With Connection Lines
Root
Subfolder
File
Another File
Usage Guidelines
When to Use
- File browsers
- Category trees
- Organization charts
Accessibility
- Tree role with treeitem
- Keyboard navigation with arrows
Performance
- Lazy child loading
- Virtual rendering for deep trees
Common Mistakes
- Loading entire tree at once
- No expand/collapse indicators
Frequently Asked Questions
Yes, Tree supports lazy loading for large hierarchies with expand-on-demand.
Yes, Tree supports single and multiple selection modes.
Related Components
View allAccordion
Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
Avatar
User avatar with image loading, fallback text generation, status indicators, and shape variants
AvatarGroup
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Badge
Status indicator with variant system, dot mode, positioning, and pulsing animation support