Tree

A composable tree component with animated expand/collapse and customizable nodes for displaying hierarchical data structures.

src

components

button.tsx

card.tsx

dialog.tsx

layout

public

package.json

tsconfig.json

README.md

Installation

npx loveui add 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

Documents

Downloads

Custom icons

Database

Users

password

Roles

Admin

User

API

Authentication

Users Management

Without lines

Projects

Website Redesign

Homepage

About Page

Contact Form

Mobile App

Resources

Controlled selection

Team

Engineering

Connor Love

Ian Schroeder

Design

Owen Caudy

Tyler PennyPacker

Product

Tyler Love

Ben Dyer