Skip to content

RTL

Support right-to-left interfaces deliberately

RTL support starts at the document direction and continues through layout, overlay placement, icon decisions, and keyboard behavior.

Setup

tsx
<html lang="ar" dir="rtl">
  <body>
    <CooudUIProvider asRoot defaultThemeName="aurora" defaultModeName="dark">
      {children}
    </CooudUIProvider>
  </body>
</html>

For mixed-locale products, set dir at the route shell instead of changing individual components one by one.

Rules

Direction at the root

Set dir on html or the route shell so portals, overlays, and form controls inherit direction.

Logical spacing

Prefer gap, inline, start/end, and framework logical utilities over left/right assumptions.

Icons

Mirror directional icons intentionally; never mirror brand marks or status symbols by default.

Keyboard

Check arrow-key behavior in tabs, menus, radio groups, sliders, and carousels.

Checklist

  • Root dir attribute is present before hydration.
  • Dropdowns, sheets, and popovers align to the expected edge.
  • Arrow icons are mirrored only when they communicate direction.
  • Focus ring remains visible against the active theme.
  • Form labels and errors keep the same reading order as the locale.