Free
Pro

Tree

The Tree component allows users to browse hierarchical data structures like file systems, categories, or organizational charts. It supports unlimited nesting, expand/collapse actions, and custom icons.

Pro

Tree — part of Base UI Pro

Unlock it plus 89 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Basic Tree

Simple tree showing a file system structure.

  • src
    • app
      • app.module.ts
  • package.json

Click a node to see details


HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add tree

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add tree
// Paths are relative to aliases.components (default: src/app/components)
import { TreeComponent, TreeNode } from './tree/tree.component';

@Component({
  selector: 'app-your-component',
  imports: [
    TreeComponent
  ],
  template: `...`
})
export class YourComponent {}

API for tree — generated from JSDoc in the library source.

API reference for tree
APIMemberTypeDefaultDescription
TreeNodelabelstring — The primary display text for this node.
TreeNodeiconstring — Optional icon name to display next to the label.
TreeNodechildrenTreeNode[] — Nested child nodes. If present, this node becomes a collapsible folder.
TreeNodeexpandedboolean — Whether the folder is currently expanded to show its children.
TreeNodeselectedboolean — Whether this node is currently selected.
TreeNodedataRecord<string, unknown> — Arbitrary payload data attached to this node.
base-treenodesTreeNode[][]The hierarchical array of nodes to render.
base-tree(nodeClick)TreeNode — Emitted when a user clicks on a node's label/body.
base-tree(nodeExpand)TreeNode — Emitted when a folder node is expanded.
base-tree(nodeCollapse)TreeNode — Emitted when a folder node is collapsed.