# Drawer: Right to left

> Pass `dir="rtl"` to `<DrawerContent />` to mirror its content. `swipeDirection` names a physical edge, so `"left"` stays on the left and the handle stays on the inner edge.

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

## Add this example

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

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

## Source

```tsx title="components/examples/drawer/rtl.tsx"
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

export function DrawerRtl() {
  return (
    <div dir="rtl" className="flex flex-wrap justify-center gap-2">
      <Drawer>
        <DrawerTrigger render={<Button variant="outline" />}>
          من الأسفل
        </DrawerTrigger>
        <DrawerContent dir="rtl">
          <DrawerHeader>
            <DrawerTitle>تعديل الملف الشخصي</DrawerTitle>
            <DrawerDescription>
              يتم حفظ التغييرات عند النقر على حفظ.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerClose render={<Button />}>حفظ</DrawerClose>
            <DrawerClose render={<Button variant="outline" />}>
              إلغاء
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
      <Drawer swipeDirection="left" showSwipeHandle>
        <DrawerTrigger render={<Button variant="outline" />}>
          من اليسار
        </DrawerTrigger>
        <DrawerContent dir="rtl">
          <DrawerHeader>
            <DrawerTitle>القائمة</DrawerTitle>
            <DrawerDescription>اسحب إلى اليسار للإغلاق.</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerClose render={<Button variant="outline" />}>
              إغلاق
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  )
}
```

## Props in this example

### Drawer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `swipeDirection` | `"up" \| "down" \| "left" \| "right"` | `"down"` | The edge it opens from and the direction that dismisses it. |
| `showSwipeHandle` | `boolean` | – | Shows the handle. Defaults to true for up and down, false for left and right. |

### DrawerTrigger

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

### DrawerClose

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

## More Drawer examples

- [Directions](https://hextaui.com/docs/drawer/examples/directions.md)
- [Snap points](https://hextaui.com/docs/drawer/examples/snap-points.md)
- [Scrollable content](https://hextaui.com/docs/drawer/examples/scrollable.md)
- [Forms and the keyboard](https://hextaui.com/docs/drawer/examples/keyboard.md)
- [Nested](https://hextaui.com/docs/drawer/examples/nested.md)
- [Confirm from a drawer](https://hextaui.com/docs/drawer/examples/confirm.md)
- [Responsive](https://hextaui.com/docs/drawer/examples/responsive.md)
- [Non-modal](https://hextaui.com/docs/drawer/examples/non-modal.md)
- [Controlled](https://hextaui.com/docs/drawer/examples/controlled.md)
- [Detached triggers](https://hextaui.com/docs/drawer/examples/detached.md)