Skip to content
Design System
العربية

Arabic and RTL

Arabic isn't a translation layer on top. Every component is designed and tested in both directions.

Setup

  1. Set <html lang="ar" dir="rtl">.
  2. Wrap the app in React Aria's <I18nProvider locale="ar-EG">.
jsx
import { I18nProvider } from "react-aria-components";

<I18nProvider locale="ar-EG">
  <App />
</I18nProvider>

What changes

  • Layout: components use logical CSS properties (start and end, not left and right), so there's no separate RTL stylesheet.
  • Keyboard: arrow keys follow reading direction in menus, tabs, sliders and calendars.
  • Dates and numbers: calendars, the first day of the week, weekends, date order and digits follow the locale.
  • Built-in text: labels like Cancel, Close and Search come in both languages.

Fonts

The font tokens list the English face first and the Arabic face second, so mixed text picks the right font for each letter automatically. Arabic headings are slightly smaller and body text slightly larger, because Arabic letters read smaller at the same size.

Left-to-right islands

Phone numbers, code, email addresses and IDs stay left to right inside Arabic text. The phone and code components handle this for you; for your own content, add dir="ltr".