║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Tree description: A composable tree component with animated expand/collapse and customizable nodes for displaying hierarchical data structures. icon: FolderTree dependencies:

• https://motion.dev/
• https://lucide.dev/ installer: tree

---

Features

• Animated expand/collapse with configurable animations
• Customizable node icons and labels
• Single and multi-selection support
• Optional tree lines for visual hierarchy
• Keyboard navigation support (Ctrl/Cmd for multi-select)
• Fully composable API for custom tree nodes
• Built-in folder/file icons with open/closed states

Examples

Simple tree

<Preview path="tree-simple" />

Custom icons

<Preview path="tree-custom-icons" />

Without lines

<Preview path="tree-no-lines" />

Controlled selection

<Preview path="tree-controlled" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║