Collections

A hierarchical UI component that organizes nested items, commonly used for file structures, menus, or category navigation.

Basic

A tree is a hierarchical list of items, allowing users to navigate through nested structures effortlessly.

Loading...

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Tree comes packed with several components to enhance functionality and provide a seamless experience.

CheckboxAn interactive input that allows users to toggle a selection on or off, often used for settings or multiple-choice selections.

Manual installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Multiple selection

To enable multiple selections, set the selectionMode prop to multiple. This prop has no default value, so it must be explicitly defined.

Loading...

Like a folder tree

A tree can be used to represent a folder structure, allowing users to expand and collapse folders to view their contents.

Loading...

Infinite scrolling

The tree can handle large datasets efficiently with infinite scrolling. This allows for loading more data as the user navigates through the tree, improving performance and user experience.

Loading...

Drag and drop

The tree supports drag and drop functionalities if you use the dragAndDropHooks prop along with the useDragAndDrop hook. You can drop data on the entire tree, individual items, add new items between existing ones, or rearrange items.

Loading...
Ready-to-use templates
Launch faster with 150+ blocks and professional templates for modern web apps.
irsyad.co
Tree / Intent UI