Tree

Preview

Installation

npx shadcn@latest add @cubby-ui/tree

Usage

import {
  Tree,
  TreeItem,
  TreeItemLabel,
  TreeNode,
} from "@/components/ui/cubby-ui/tree";

<Tree>
  <TreeItem>
    <TreeItemLabel />
  </TreeItem>
</Tree>

Examples

Variants

The Tree component supports three visual variants: default (minimal styling), filled (card-like with background), and outline (bordered card with shadow).

With Icons

Add icons to tree items using the icon prop on TreeNode. Use iconOpen to show a different icon when the node is expanded (useful for folder states).

With Lines

Enable visual connection lines between parent and child nodes using the showLines prop for better hierarchy visualization.

With Badges

Display additional information using badges. Use the badge prop on TreeNode and render with TreeItemBadge.

With Checkboxes

Enable bulk selection mode with mode="multiple". Parent checkboxes automatically reflect child selection state.

Controlled State

Control expansion and selection state externally using the expanded/onExpandedChange and selectedNode/onNodeSelect props.

Disabled & Loading States

Disable interaction on specific nodes using the disabled prop. Loading states are shown automatically with a spinner icon when nodes are loading. Set mode="none" to create a read-only tree.

Async Loading

Load tree children dynamically using the onLoadChildren callback. The Tree component automatically manages loading state and displays a spinner while fetching data. Children are cached after the first load.

API Reference

The Tree component is built with Base UI's Collapsible internally for expand/collapse functionality. All Collapsible props are supported on tree nodes. The documentation below only covers custom props specific to our Tree implementation.

For the complete Base UI Collapsible API, see the Base UI Collapsible documentation.

Custom Props

Tree

TreeNode Interface

The TypeScript interface defining the shape of each tree node: