# Tree (UI SDK): Controller

> A controller from `createTreeController()` expands, collapses, selects and reveals items from anywhere.

Canonical: https://hextaui.com/docs/ui-sdk-tree/examples/controller

Component docs: https://hextaui.com/docs/ui-sdk-tree

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-tree-controller.json
```

This adds `components/examples/ui-sdk-tree/controller.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-tree/controller.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  createTreeController,
  Tree,
  type TreeItemData,
} from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "design",
    label: "Design",
    children: [
      { value: "tokens", label: "Tokens" },
      {
        value: "icons",
        label: "Icons",
        children: [
          { value: "outline", label: "Outline" },
          { value: "filled", label: "Filled" },
        ],
      },
    ],
  },
  {
    value: "engineering",
    label: "Engineering",
    children: [
      { value: "api", label: "API" },
      { value: "web", label: "Web" },
    ],
  },
]

function UiSdkTreeController() {
  const [tree] = React.useState(createTreeController)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <div className="flex gap-2">
        <Button variant="outline" size="sm" onClick={() => tree.expandAll()}>
          Expand all
        </Button>
        <Button variant="outline" size="sm" onClick={() => tree.collapseAll()}>
          Collapse all
        </Button>
        <Button variant="ghost" size="sm" onClick={() => tree.reveal("filled")}>
          Reveal Filled
        </Button>
      </div>
      <Tree aria-label="Teams" items={items} controller={tree} />
    </div>
  )
}

export { UiSdkTreeController }
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `TreeItemData[]` | – | The whole hierarchy. Without children, the tree renders styled rows from it. |
| `controller` | `TreeController` | – | From createTreeController(). |

## More Tree examples

- [Items as data](https://hextaui.com/docs/ui-sdk-tree/examples/data)
- [File paths](https://hextaui.com/docs/ui-sdk-tree/examples/paths)
- [Multiple selection](https://hextaui.com/docs/ui-sdk-tree/examples/multiple)
- [Checkboxes](https://hextaui.com/docs/ui-sdk-tree/examples/checkboxes)
- [Navigation](https://hextaui.com/docs/ui-sdk-tree/examples/links)
- [Loading children](https://hextaui.com/docs/ui-sdk-tree/examples/lazy)
- [Lines and small size](https://hextaui.com/docs/ui-sdk-tree/examples/lines)
- [Find in page](https://hextaui.com/docs/ui-sdk-tree/examples/find-in-page)
- [Disabled](https://hextaui.com/docs/ui-sdk-tree/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-tree/examples/rtl)