# Tree: Connectors

> `variant="connectors"` joins each item to its parent with an elbow, like a terminal tree listing. Use `meta` for versions, sizes or counts.

Example: https://hextaui.com/docs/tree/examples/connectors
Component docs: https://hextaui.com/docs/tree.md

## Add this example

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

This adds `components/examples/tree/connectors.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tree/connectors.tsx"
import { IconPackage } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

type Dependency = { name: string; version: string; dependencies?: Dependency[] }

const dependencies: Dependency[] = [
  {
    name: "next",
    version: "16.3.8",
    dependencies: [
      { name: "@next/env", version: "16.3.8" },
      {
        name: "postcss",
        version: "8.5.6",
        dependencies: [
          { name: "nanoid", version: "3.3.11" },
          { name: "picocolors", version: "1.1.1" },
          { name: "source-map-js", version: "1.2.1" },
        ],
      },
      { name: "styled-jsx", version: "5.1.7" },
    ],
  },
  {
    name: "react-dom",
    version: "19.3.0",
    dependencies: [{ name: "scheduler", version: "0.27.0" }],
  },
]

function renderDependencies(items: Dependency[], parent = ""): React.ReactNode {
  return items.map((item) => {
    const value = `${parent}/${item.name}`
    return (
      <TreeItem key={value} value={value}>
        <TreeItemLabel icon={<IconPackage />} meta={item.version}>
          {item.name}
        </TreeItemLabel>
        {item.dependencies ? (
          <TreeGroup>{renderDependencies(item.dependencies, value)}</TreeGroup>
        ) : null}
      </TreeItem>
    )
  })
}

export function TreeConnectors() {
  return (
    <Tree
      aria-label="Dependencies"
      variant="connectors"
      selectionMode="none"
      defaultExpandedValues={["/next", "/next/postcss", "/react-dom"]}
      className="w-full max-w-xs"
    >
      {renderDependencies(dependencies)}
    </Tree>
  )
}
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "lines" \| "connectors"` | `"default"` |  |
| `selectionMode` | `"none" \| "single" \| "multiple"` | `"single"` |  |
| `defaultExpandedValues` | `string[]` | – |  |

### TreeItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Required. Unique within the tree. |

### TreeItemLabel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `ReactNode` | – | Shown before the label. |
| `meta` | `ReactNode` | – | Shown at the end of the row, such as a size, count or status. |

## More Tree examples

- [Indent guides](https://hextaui.com/docs/tree/examples/lines.md)
- [Checkboxes](https://hextaui.com/docs/tree/examples/checkboxes.md)
- [Navigation](https://hextaui.com/docs/tree/examples/navigation.md)
- [Multiple selection](https://hextaui.com/docs/tree/examples/multiple.md)
- [Controlled](https://hextaui.com/docs/tree/examples/controlled.md)
- [Lazy loading](https://hextaui.com/docs/tree/examples/lazy.md)
- [Small](https://hextaui.com/docs/tree/examples/small.md)
- [Disabled](https://hextaui.com/docs/tree/examples/disabled.md)
- [Long names](https://hextaui.com/docs/tree/examples/long-names.md)
- [Right to left](https://hextaui.com/docs/tree/examples/rtl.md)