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.

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>
  )
}

Add this example

This adds the example as components/examples/sheet/rtl.tsx, together with the Sheet component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/sheet-rtl.json

To add only the component, follow the Sheet installation.

Props in this example

The Sheet props this example sets, from the API reference.

SheetTrigger

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

SheetContent

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

SheetClose

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

Every prop is in the Sheet API reference.

More Sheet examples

See them all, with keyboard support and accessibility notes, on the Sheet page.