Tree

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

motion

lucide-react

src

components

button.tsx

card.tsx

dialog.tsx

layout

public

package.json

tsconfig.json

README.md

Installation

npx kibo-ui@latest 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

Alice Johnson

Bob Smith

Design

Carol Williams

David Brown

Product

Eve Davis

Frank Miller