Tree

• src
  • components
    • Button.tsx
    • Tree.tsx
  • index.ts
• package.json

Contract

Overview

Machine-readable contract from Component Spec.

component: treeexport: Treeversion: 1attributes: data-refineui=tree

Anatomy

Part	data-refineui
root	tree
item	tree-item
item_chevron	tree-item-chevron
item_content	tree-item-content
item_main	tree-item-main
item_panel	tree-item-panel
item_trigger	tree-item-trigger

Variants

Axis	Values
size	sm, md, lg

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role	Required attributes
tree	div	tree	—
tree-item	div	treeitem	aria-selected: required=true, type: boolean
tree-item-trigger	button	—	—

Keyboard

Key	Action	Native
ArrowDown	next-trigger	—
ArrowUp	previous-trigger	—
Home	first-trigger	—
End	last-trigger	—
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	roving	true

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Tree, TreeItem, TreeItemContent, TreeItemTrigger } from "@refineui/react";

<Tree defaultExpanded={["src"]} defaultSelected="button">
  <TreeItem value="src">
    <TreeItemTrigger>src</TreeItemTrigger>
    <TreeItemContent>
      <TreeItem value="button">
        <TreeItemTrigger>Button.tsx</TreeItemTrigger>
      </TreeItem>
    </TreeItemContent>
  </TreeItem>
  <TreeItem value="package">
    <TreeItemTrigger>package.json</TreeItemTrigger>
  </TreeItem>
</Tree>

Built from Foundation spacing, radius, color aliases, and typography tokens (same density as Sidebar / Menu). Chevron expands branches; row click selects. Arrow keys follow the WAI-ARIA tree pattern.

API Reference

Tree

Prop	Default	Type	Description
size	"md"	"sm" | "md" | "lg"	Row typography size.
expanded	—	string[]	Controlled expanded item values.
defaultExpanded	—	string[]	Uncontrolled initial expanded values.
onExpandedChange	—	(value: string[]) => void	Fires when expansion changes.
selected	—	string | null	Controlled selected item value.
defaultSelected	—	string	Uncontrolled initial selection.
onSelectedChange	—	(value: string | null) => void	Fires when selection changes.

TreeItem

Prop	Default	Type	Description
value	—	string	Unique identifier (required).
disabled	false	boolean	Disables selection and expansion.

TreeItemTrigger

Focusable row label. Shows a chevron when the item has TreeItemContent.

TreeItemContent

Nested TreeItem group. Mounted only while the parent is expanded.