RTL

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-u-nu-latn">
  <OrderSummary />
</ThemeScope>

The -u-nu-latn extension keeps Latin digits in Arabic text, which is what Qamar’s copy uses; locale="ar-AE" alone lets the locale choose. 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:

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.