Tree

A collapsible, keyboard-navigable tree view for hierarchical data — file trees, org charts, and nested navigation.

Installation

npx @obi/ui add tree

Preview

src

components

Button.tsx

Input.tsx

app

page.tsx

layout.tsx

package.json

tsconfig.json

Usage

import Tree, { TreeItem } from '@/src/components/Tree/Tree';

export default function Example() {
  return (
    <Tree>
      <TreeItem label="src" defaultOpen>
        <TreeItem label="components">
          <TreeItem label="Button.tsx" />
          <TreeItem label="Input.tsx" />
        </TreeItem>
        <TreeItem label="app">
          <TreeItem label="page.tsx" />
          <TreeItem label="layout.tsx" />
        </TreeItem>
      </TreeItem>
      <TreeItem label="package.json" />
      <TreeItem label="tsconfig.json" />
    </Tree>
  );
}

Props

Name	Type	Default	Description
label	ReactNode	—	The text or content displayed for the node. (TreeItem)
children	ReactNode	—	Nested TreeItem elements. Presence makes this a branch node. (TreeItem)
defaultOpen	boolean	false	Whether a branch starts expanded on initial render. (TreeItem)
icon	ReactNode	—	Custom icon overriding the default chevron or file icon. (TreeItem)
disabled	boolean	false	Disables interaction. Item is visible but not clickable or focusable. (TreeItem)
className	string	""	Additional classes on the item row or tree root element.