# Sheet: Right to left

> With `dir="rtl"`, the right side mirrors to the left edge, slides in from there and swipes out the same way.

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

## Add this example

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

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

## Source

```tsx title="components/examples/sheet/rtl.tsx"
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetRtl() {
  return (
    <div dir="rtl">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>افتح</SheetTrigger>
        <SheetContent dir="rtl">
          <SheetHeader>
            <SheetTitle>تعديل الملف الشخصي</SheetTitle>
            <SheetDescription>
              يتم حفظ التغييرات عند النقر على حفظ.
            </SheetDescription>
          </SheetHeader>
          <SheetFooter>
            <SheetClose render={<Button variant="outline" />}>إلغاء</SheetClose>
            <SheetClose render={<Button />}>حفظ</SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </div>
  )
}
```

## Props in this example

### SheetTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### SheetContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dir` | `"ltr" \| "rtl"` | – | Sets the direction for the sheet. right and left mirror in rtl. |

### SheetClose

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## More Sheet examples

- [Sides](https://hextaui.com/docs/sheet/examples/sides.md)
- [Long content](https://hextaui.com/docs/sheet/examples/long-content.md)
- [Without the close button](https://hextaui.com/docs/sheet/examples/no-close-button.md)
- [Nested](https://hextaui.com/docs/sheet/examples/nested.md)
- [Controlled](https://hextaui.com/docs/sheet/examples/controlled.md)
- [Detached triggers](https://hextaui.com/docs/sheet/examples/detached.md)