# Tree (UI SDK): Right to left

> Rows indent from the right, the chevron points left, and the Left and Right arrow keys swap.

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

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

## Add this example

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

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

## Source

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

const items: TreeItemData[] = [
  {
    value: "documents",
    label: "المستندات",
    children: [
      { value: "reports", label: "التقارير" },
      { value: "invoices", label: "الفواتير" },
    ],
  },
  {
    value: "photos",
    label: "الصور",
    children: [{ value: "trips", label: "الرحلات" }],
  },
  { value: "notes", label: "ملاحظات" },
]

function UiSdkTreeRtl() {
  return (
    <div dir="rtl" className="w-full max-w-xs">
      <Tree
        aria-label="الملفات"
        items={items}
        defaultExpanded={["documents"]}
        defaultValue="reports"
      />
    </div>
  )
}

export { UiSdkTreeRtl }
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `TreeItemData[]` | – | The whole hierarchy. Without children, the tree renders styled rows from it. |
| `defaultValue` | `string \| string[] \| null` | – |  |
| `defaultExpanded` | `string[]` | – |  |

## 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)
- [Find in page](https://hextaui.com/docs/ui-sdk-tree/examples/find-in-page)
- [Disabled](https://hextaui.com/docs/ui-sdk-tree/examples/disabled)