Prologue

Contribution Guide Release Notes Upgrade Guide

Getting Started

Introduction Installation Client Side Routing Colors

Dark Mode

Inertia.js Next.js Vite

Buttons

Button File Trigger Toggle Group Toggle

Collections

Choicebox Dropdown Grid List List Box Menu Table Tag Group Tree

Colors

Color Area Color Field Color Picker Color Slider Color Swatch Picker Color Swatch Color Thumb Color Wheel

Controls

Command Menu Context Menu Keyboard Slider Switch Toolbar

Date And Time

Calendarupdated Date Field Date Picker Date Range Picker Range Calendarupdated Time Field

Drag And Drop

Drop Zone

Forms

Checkbox Group Checkbox Field Form Input Otp Number Field Radio Group Search Field Tag Field Text Field Textarea

Layouts

Container Navbar Sidebar

Media

Avatar Carousel

Navigation

Breadcrumbs Disclosure Group Disclosure Link Pagination Tabs

Overlays

Dialog Drawer Modal Popover Sheet Tooltip

Pickers

Combo Box Multiple Select Select

Statuses

Badgeupdated Loader Meter Noteupdated Progress Bar Progress Circle Skeleton Toastupdated

Surfaces

Card Description List Heading Separator Show More

Utilities

Visually Hidden

Visualizations

Area Chart Bar Chart Bar List Chart Line Chart Pie Chart Tracker

Collections

Tree

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.

Departments

Projects

Clients

Legal

Resources

Installation

npx shadcn@latest add @intentui/tree

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.

This component comes packed with several components to enhance functionality and provide a seamless experience.

checkbox

Manual installation

npm i react-aria-components @intentui/icons

Anatomy

import { Tree, TreeContent, TreeItem } from "@/components/ui/tree"

<Tree aria-label="Tree anatomy example">
  <TreeItem id="a" textValue="Departments">
    <TreeContent />
    <TreeItem id="b" textValue="Sales">
      <TreeContent>Sales</TreeContent>
      <TreeItem id="c" textValue="Reports">
        <TreeContent>Reports</TreeContent>
        <TreeItem id="d1" textValue="Q1.pdf">
          <TreeContent>Q1.pdf</TreeContent>
        </TreeItem>
        <TreeItem id="d2" textValue="Q2.pdf">
          <TreeContent>Q2.pdf</TreeContent>
        </TreeItem>
        <TreeItem id="q3" textValue="Q3.pdf">
          <TreeContent>Q3.pdf</TreeContent>
        </TreeItem>
      </TreeItem>
      <TreeItem id="contacts" textValue="Client Contacts">
        <TreeContent>Client Contacts</TreeContent>
        <TreeItem id="europe" textValue="Europe.xlsx">
          <TreeContent>Europe.xlsx</TreeContent>
        </TreeItem>
        <TreeItem id="asia" textValue="Asia.xlsx">
          <TreeContent>Asia.xlsx</TreeContent>
        </TreeItem>
      </TreeItem>
    </TreeItem>
  </TreeItem>
  <TreeItem id="projects" textValue="Projects">
    <TreeContent>Projects</TreeContent>
    <TreeItem id="revamp" textValue="Website revamp">
      <TreeContent>Website revamp</TreeContent>
      <TreeItem id="wireframes" textValue="Wireframes">
        <TreeContent>Wireframes</TreeContent>
        <TreeItem id="home" textValue="Home.fig">
          <TreeContent>Home.fig</TreeContent>
        </TreeItem>
        <TreeItem id="pricing" textValue="Pricing.fig">
          <TreeContent>Pricing.fig</TreeContent>
        </TreeItem>
      </TreeItem>
    </TreeItem>
    <TreeItem id="mobileapp" textValue="Mobile app">
      <TreeContent>Mobile app</TreeContent>
    </TreeItem>
  </TreeItem>
</Tree>

Multiple selection

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

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.

departments

projects

clients

legal

resources

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.

Pokemon

Star Wars

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.