104Get started
HextaUI

Calendar: Right to left

Pass a locale from react-day-picker/locale and dir="rtl". Arrows, navigation and the slide direction all mirror. Inside a dir="rtl" DirectionProvider, the direction is picked up automatically.

أكتوبر 2026
"use client"

import { arSA } from "react-day-picker/locale"

import { Calendar } from "@/components/ui/calendar"

export function CalendarRtl() {
  return (
    <div dir="rtl" className="max-w-full min-w-0">
      <div className="w-fit max-w-full overflow-x-auto rounded-xl border">
        <Calendar mode="range" locale={arSA} dir="rtl" />
      </div>
    </div>
  )
}

Add this example

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

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

To add only the component, follow the Calendar installation.

Props in this example

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

Calendar

PropTypeDefault
modeWithout a mode, days are not selectable.
"single" | "multiple" | "range"–
locale
Partial<DayPickerLocale>–
dir
"ltr" | "rtl"–

Every prop is in the Calendar API reference.

More Calendar examples

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

Related components