Tree Component
A hierarchical tree view with drag-and-drop, multi-select, and keyboard navigation powered by headless-tree.
Interactive Tree
Try expanding/collapsing folders, selecting items, and dragging to reorder
Tee with multi-select and drag and drop ∙ API
Features
Full-featured tree component capabilities
Navigation
- • Click to expand/collapse folders
- • Arrow keys for navigation
- • Single and multi-select
- • Keyboard shortcuts
- • Focus management
Drag and Drop
- • Drag items to reorder
- • Drop into folders
- • Visual drop indicators
- • Keyboard drag and drop
- • Constraint-based dropping
Accessibility
- • ARIA labels and roles
- • Screen reader support
- • Live regions for updates
- • Keyboard-only operation
- • Focus indicators
Customization
- • Custom item rendering
- • Configurable indent
- • Folder icons
- • Styling support
- • Event handlers
Keyboard Shortcuts
Navigate and interact with the tree using keyboard
↑ ↓Navigate up/down
← →Collapse/expand folder
EnterSelect/activate item
SpaceToggle selection
Cmd/Ctrl + ASelect all
Shift + ↑ ↓Range select
Cmd/Ctrl + ClickMulti-select
Home / EndFirst/last item
Use Cases
Common applications for tree components
File Explorers
Navigate and organize files and folders with familiar tree interactions
Layer Panels
Manage design layers and components in visual editors
Organization Charts
Display hierarchical structures like company departments