# Tree: Right to left

> Indents, connectors and chevrons mirror, and the left and right arrow keys swap.

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

## Add this example

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

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

## Source

```tsx title="components/examples/tree/rtl.tsx"
import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react"

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

export function TreeRtl() {
  return (
    <div dir="rtl" className="w-full max-w-xs">
      <Tree
        aria-label="المستندات"
        variant="connectors"
        defaultExpandedValues={["docs", "invoices"]}
        defaultSelectedValues={["march"]}
      >
        <TreeItem value="docs">
          <TreeItemLabel
            icon={<IconFolder />}
            expandedIcon={<IconFolderOpen />}
          >
            المستندات
          </TreeItemLabel>
          <TreeGroup>
            <TreeItem value="invoices">
              <TreeItemLabel
                icon={<IconFolder />}
                expandedIcon={<IconFolderOpen />}
              >
                الفواتير
              </TreeItemLabel>
              <TreeGroup>
                <TreeItem value="march">
                  <TreeItemLabel icon={<IconFile />} meta="١٢٠ ك.ب">
                    مارس.pdf
                  </TreeItemLabel>
                </TreeItem>
                <TreeItem value="april">
                  <TreeItemLabel icon={<IconFile />}>أبريل.pdf</TreeItemLabel>
                </TreeItem>
              </TreeGroup>
            </TreeItem>
            <TreeItem value="contract">
              <TreeItemLabel icon={<IconFile />}>العقد.docx</TreeItemLabel>
            </TreeItem>
          </TreeGroup>
        </TreeItem>
        <TreeItem value="notes">
          <TreeItemLabel icon={<IconFile />}>ملاحظات.txt</TreeItemLabel>
        </TreeItem>
      </Tree>
    </div>
  )
}
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "lines" \| "connectors"` | `"default"` |  |
| `defaultSelectedValues` | `string[]` | – |  |
| `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. |
| `expandedIcon` | `ReactNode` | – | Crossfades in for icon while the branch is open. |
| `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)
- [Connectors](https://hextaui.com/docs/tree/examples/connectors.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)