Right-to-left layouts

Choose Direction → RTL on a component page to inspect the mirrored interface, even while reading English. In React, Vue, and Next.js, selecting an RTL language sets direction through directionFor in shared/ui/preferences.mjs; Nuxt's equivalent locale choice lives in nuxt/app/stores/preferences.ts. The direction control can override the language's default. The HTML edition has the direction control but no language switcher. Adding a locale covers registration.

Check the layout, not only the translation

The document's dir attribute changes the layout. When adding a component, use CSS logical properties such as margin-inline-start and padding-inline-end so an RTL reader gets the same spacing without a second screen. In the full repository, edit shared/styles/ and shared/tokens/ and sync; in a standalone edition or starter, edit those directories in its own shared mirror (see generated folders). shared/tokens/effects.css mirrors the hard shadow under [dir='rtl']. Do not apply a blanket icon flip: shared/icons/manifest.json lists only directional icons in rtlFlip, such as arrows and Send.

Check mixed-script content

Names, addresses, and messages can use a different script from the interface. shared/styles/inbox.css applies unicode-bidi: plaintext to message bodies and previews; shared/styles/billing.css does the same for invoice addresses. Its invoice totals keep amounts LTR with an isolated direction in RTL layouts. Check a mixed-script message and an amount, not just a translated heading. From the start page, open a component reference page and switch to RTL to inspect individual controls; test the actual page in the edition you ship as well.