Tree

Tree control for displaying hierarchical data, with expand/collapse support.

Basic Usage

Pass tree data with data. Each node can have label and children.

import { Tree } from '@airo-ui/react'

const treeData = [
  {
    label: 'Project',
    children: [
      {
        label: 'src',
        children: [
          { label: 'index.ts' },
          { label: 'App.tsx' },
          { label: 'styles.css' },
        ],
      },
      { label: 'package.json' },
      { label: 'README.md' },
    ],
  },
  { label: 'node_modules' },
]

function Demo() {
  return <Tree data={treeData} />
}

Node Click

onNodeClick returns the clicked node data and path.

<Tree
  data={treeData}
  onNodeClick={(node, path) => console.log(node.label, path)}
/>

API

Props

Name	Type	Default	Description
data	TreeNodeData[]	Required	Tree data
nodeKey	string	'id'	Node unique key field
onNodeClick	(node: TreeNodeData, path: string) => void	--	Node click handler

TreeNodeData

Property	Type	Description
label	string	Node display text
children	TreeNodeData[]	Child nodes (optional)
[key: string]	unknown	Additional custom properties

Interaction

• Arrow icon rotates to indicate expand/collapse
• Nodes with children show expand arrow
• Nested level indentation
• Hover highlight
• Full ARIA tree role