Components

Calendar

The month grid on its own, inline on a page (bookings, statements, delivery slots) or inside a date picker. One day, or a range between a start and an end. The week starts from the locale, and in Arabic the grid reads right to left.

Figmashadcn equivalentcalendar

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry is coming soon. Until then, these are the commands you will run.

npx ritla add calendar

Also works with shadcn: npx shadcn@latest add @ritla/calendar

Dependencies it brings: react-day-picker, @phosphor-icons/react

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

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

const [day, setDay] = useState<Date | undefined>(new Date());

<Calendar mode="single" selected={day} onSelect={setDay} />

Examples

Range

mode="range": the start, then the end; the days between take a light band. Picking an end before the start swaps them quietly.

Get the code ›

Unavailable days

disabled turns off the days that can't be chosen (before the first slot, Fridays), and footer says why under the grid, so the state never rests on color alone.

Get the code ›

API reference

Calendar

Every react-day-picker prop, as in shadcn's Calendar.

Prop	Type	Default	Description
`mode`	`"single" \| "range" \| "multiple"`	None	Figma's Mode: one day or a range.
`selected / onSelect`	`Date \| DateRange`	None	The chosen day or range.
`month / defaultMonth / onMonthChange`	`Date`	None	The month shown. Open on the first available month, never an empty one.
`disabled`	`Matcher \| Matcher[]`	None	Days that can't be chosen; say why in `footer`.
`weekStartsOn`	`0 to 6`	None	Default: from the locale. Monday in English and Saturday in Arabic; Sunday for ar-SA, Monday for ar-AE.
`numberOfMonths`	`number`	`1`	Two months on desktop for ranges.
`framed`	`boolean`	`true`	The Figma panel (gray border, radius 12, 16px in). Turn it off inside a menu that has its own.
`numerals`	`"latn" \| "arab"`	None	Default: from `KanzProvider`.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowLeftArrowRight`	One day back or on; in Arabic ArrowLeft is the next day.
`ArrowUpArrowDown`	One week.
`PageUpPageDown`	One month; with Shift, a year.
`HomeEnd`	The week's edges.
`EnterSpace`	Chooses the day.

ARIA

The grid is role="grid" named by its month, and each day a button with its full name ("Thursday, September 17, 2026"), with Today and selected when they apply.
The month name is in a live region (aria-live="polite"), so a change is announced.
Previous and Next month are named in the page language, with a 48px touch target.

Arabic and RTL notes

Mirrors

The grid: the first day of the week on the right.
Previous month at the inline start (the right), pointing right; Next month on the left.
A range band runs from right to left.

Does not mirror

The day numbers themselves.

Numerals: Day numbers and the year follow numerals.
Arabic typography: Days are body-14 and the title label-16 Semibold. Arabic weekday names come from Intl without the article («سبت») at label-12, to fit a 44px column.
Mixed-direction text: Arabic month names run يناير to ديسمبر, the same set as the rest of the product.