Right-to-left by default

The problem

Layouts built with left and right margins, hard-coded arrows and physical positions break in right-to-left languages. Fixing them later means touching every screen.

When to use it

Use it for

Always. Every Nexera component supports RTL; your own layout code should too.

Not for

Never mirror icons that mean time, media playback, or real-world objects like a clock or a checkmark.

Anatomy

LocaleSet on NexeraProvider. It sets dir and the formatting of dates and numbers.
Logical propertiesms-, me-, ps-, pe-, start-, end- instead of left and right.
Directional iconsBack and forward arrows, chevrons. Nexera flips them for you.
Fixed iconsPlay, clock, checkmark, logos. Never flipped.

How to build it

Set locale (and direction if you need to override it) on NexeraProvider.
Use Tailwind's logical utilities: ms-4 not ml-4, ps-3 not pl-3, start-0 not left-0.
Use text-start and text-end, not text-left and text-right.
Check every screen in RTL in Storybook or with the direction toggle.
Format dates and numbers with the locale, not by hand.

app.tsx

import { NexeraProvider } from "@nexera-ui/react";

<NexeraProvider locale="ar" direction="rtl">
  <App />
</NexeraProvider>

// In your own layout code
<div className="ms-4 ps-3 text-start border-s">…</div>

Accessibility

dir on the root lets screen readers and browsers handle text direction and bidi correctly.
Keyboard arrow keys follow reading direction in RTL: Right goes back, Left goes forward.
Mixed-direction text, like an English name in Arabic, is isolated so punctuation doesn't jump.

Do and don't

DoPass an RTL locale and let logical properties flip the layout.

Don'tMirror icons that mean time or media playback.

DoUse ms-/me-/ps-/pe- for spacing.

Don'tWrite ml-4 and override it with rtl:mr-4.

DoTest with real Arabic or Hebrew text, which is often shorter or longer.

Don'tTest with English text in an RTL layout and call it done.