# Tree (UI SDK): Find in page

> With `hiddenUntilFound`, closed groups stay in the page, so the browser’s Find in Page can match Phobos and open Mars to show it.

Canonical: https://hextaui.com/docs/ui-sdk-tree/examples/find-in-page

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

## Add this example

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

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

## Source

```tsx title="components/examples/ui-sdk-tree/find-in-page.tsx"
import { Tree, type TreeItemData } from "@/components/ui/ui-sdk-tree"

const items: TreeItemData[] = [
  {
    value: "planets",
    label: "Planets",
    children: [
      { value: "mercury", label: "Mercury" },
      { value: "venus", label: "Venus" },
      {
        value: "earth",
        label: "Earth",
        children: [{ value: "moon", label: "The Moon" }],
      },
      {
        value: "mars",
        label: "Mars",
        children: [
          { value: "phobos", label: "Phobos" },
          { value: "deimos", label: "Deimos" },
        ],
      },
    ],
  },
  {
    value: "dwarf-planets",
    label: "Dwarf planets",
    children: [
      { value: "ceres", label: "Ceres" },
      {
        value: "pluto",
        label: "Pluto",
        children: [{ value: "charon", label: "Charon" }],
      },
    ],
  },
]

function UiSdkTreeFindInPage() {
  return (
    <Tree
      aria-label="Solar system"
      items={items}
      hiddenUntilFound
      className="max-w-xs"
    />
  )
}

export { UiSdkTreeFindInPage }
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `TreeItemData[]` | – | The whole hierarchy. Without children, the tree renders styled rows from it. |
| `hiddenUntilFound` | `boolean` | `false` |  |

## 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)
- [Controller](https://hextaui.com/docs/ui-sdk-tree/examples/controller)
- [Disabled](https://hextaui.com/docs/ui-sdk-tree/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-tree/examples/rtl)