Tree

Copy MarkdownOpen

Example

Features

• Item selection – Single or multiple selection, with optional checkboxes, disabled items, and both toggle and replace selection behaviors.
• Interactive children – Tree items may include interactive elements such as buttons, menus, etc.
• Actions – Items support optional actions such as navigation via click, tap, double click, or Enter key.
• Keyboard navigation – Tree items and focusable children can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well.
• Drag and drop – Tree supports drag and drop to reorder, move, insert, or update items via mouse, touch, keyboard, and screen reader interactions.
• Virtualized scrolling – Use Virtualizer to improve performance of large lists by rendering only the visible items.
• Touch friendly – Selection and actions adapt their behavior depending on the device. For example, selection is activated via long press on touch when item actions are present.
• Accessible – Follows the ARIA treegrid pattern, with additional selection announcements via an ARIA live region. Extensively tested across many devices and assistive technologies to ensure announcements and behaviors are consistent.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add tree

Anatomy

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

<Tree selectionMode="multiple">
  <TreeItem id="group-1" textValue="Group">
    <TreeContent>Group</TreeContent>
    <TreeItem id="item-1" textValue="Item 1">
      <TreeContent>Item 1</TreeContent>
    </TreeItem>
    <TreeItem id="item-2" textValue="Item 2">
      <TreeContent>Item 2</TreeContent>
    </TreeItem>
    <TreeItem id="item-3" textValue="Item 3">
      <TreeContent>Item 3</TreeContent>
    </TreeItem>
  </TreeItem>
</Tree>

Another Examples

Multiple

Supports selecting more than one item simultaneously. Items can be individually toggled on or off. Useful for choosing multiple options like different fruits, categories, or tags in a single list.

Folder Tree

Displays a hierarchical structure of items with nested levels, mimicking a typical folder layout. Useful for organizing content into expandable groups, making it easier to browse and navigate complex data.

Props

Loading types…