RTL
Right-to-left layouts with logical properties and React Aria locales.
Qamar runs in Arabic, right to left, on the same components as Vela and Harbor. RTL in Syntara is a property of the layout, not a mode: styles use logical properties everywhere, so nothing needs mirroring after the fact (ADR-009).
Set the direction
Give the right-to-left region a locale. ThemeScope’s locale prop sets React Aria’s locale and, unless you pass them yourself, lang and dir. React Aria reads direction from the locale — not from the dir attribute — to mirror keyboard behaviour (arrow keys in tabs, menus and tables), place popovers, and format dates and numbers.
import { ThemeScope } from '@syntara/react';
<ThemeScope theme="qamar" locale="ar-AE" numerals="native">
<OrderSummary />
</ThemeScope>Digits
locale="ar-AE" alone writes dates and numbers as 1 2 3, because that is the UAE's default. numerals="native" switches every date, number and calendar in the scope to the language's own digits: ١٢٣ in Arabic, १२३ in Hindi, and so on for Persian, Urdu, Bengali, Tamil, Thai and others. numerals="latin" forces 1 2 3 instead. Qamar and Haat use their own digits (ADR-048).
Formatting only covers numbers the components format. Digits typed into your own copy stay as you wrote them, so write them in the same digits; the docs' Arabic and Hindi copy is kept that way by node scripts/native-digits.mjs.
Outside a ThemeScope, wrap the region in React Aria’s I18nProvider and set dir and lang yourself.
Logical properties only
Components never use left, right, margin-left or text-align: left. The logical forms follow the writing direction:
| Instead of | Use |
|---|---|
margin-left | margin-inline-start |
padding-right | padding-inline-end |
left: 0 | inset-inline-start: 0 |
text-align: left | text-align: start |
border-top-left-radius | border-start-start-radius |
width / height | inline-size / block-size |
A few things have no logical form — transforms, background-position, shadow offsets — and are handled case by case.
Icons
Icons that point somewhere — arrows, chevrons — flip in RTL with scale: -1 1 under :dir(rtl). Button, Breadcrumbs and Pagination do this for you. Icons that don’t imply a direction, like a search glass or a check mark, stay as they are.
Type
Qamar’s type pair, Readex Pro with IBM Plex Sans Arabic, covers Arabic and Latin. Arabic-capable pairs set heading letter-spacing to 0: tracking breaks the joins in Arabic script.
Try it
Every preview on this site has a direction switch. Pick Qamar and right-to-left to see a component the way Qamar’s users do.