"use client"
import {Installation
pnpm dlx shadcn@latest add @reui/r-tree
Usage
import { Tree, TreeItem, TreeItemLabel } from "@/components/reui/r-tree"<Tree tree={tree}>
{tree.getItems().map((item) => (
<TreeItem key={item.getId()} item={item}>
<TreeItemLabel />
</TreeItem>
))}
</Tree>Examples
With line
"use client"
import {With Icon
"use client"
import {With Plus and Minus Icons
"use client"
import {API Reference
Tree
The root component that provides context for the tree structure.
| Prop | Type | Default | Description |
|---|---|---|---|
tree | any | - | Required. The tree instance from @headless-tree/core. |
indent | number | 20 | Pixel value for each level of indentation. |
toggleIconType | "chevron" | "plus-minus" | "chevron" | The type of icon used for expanding/collapsing folders. |
className | string | - | Additional CSS classes for the tree container. |
TreeItem
A component representing a single item (node) in the tree.
| Prop | Type | Default | Description |
|---|---|---|---|
item | ItemInstance<T> | - | Required. The instance of the current tree item. |
indent | number | - | Custom indentation for this specific item (overrides Tree indent). |
className | string | - | Additional CSS classes for the item container. |
TreeItemLabel
The component that displays the label and toggle icon for a tree item.
| Prop | Type | Default | Description |
|---|---|---|---|
item | ItemInstance<T> | - | Optional item instance (uses context if not provided). |
className | string | - | Additional CSS classes for the label. |
TreeDragLine
The visual indicator shown during drag-and-drop operations.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the drag line. |