Tree
Fabric UI Tree component for React and Tailwind CSS. A customizable tree component for React.
"use client"
import {Installation
pnpm dlx shadcn@latest add @fabric-ui/r-tree
Usage
import { Tree, TreeItem, TreeItemLabel } from "@/components/fabric-ui/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. |
More Tree components
Browse 7 production-ready Tree components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and match the Fabric UI visual system.
Browse all 7 Tree components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the Fabric UI library.