Docs · Guide

RTL support

The library (and this site) use logical CSS properties throughout, so right-to-left layouts mirror with zero overrides.

How it works

Instead of physical left/right, components use inset-inline-start/end, padding-inline,margin-block, and friends. The browser resolves those against the writing direction, so setting dir="rtl" on<html> mirrors the whole system:

<html lang="ar" dir="rtl">
  <!-- every astro-ui component mirrors automatically -->
</html>

What mirrors automatically

  • All spacing: padding, margins, gaps (inline axis)
  • Text alignment and borders
  • Sheet slide-in direction (a side="right" sheet enters from the left in RTL — the inline end)
  • Badge overlay bubbles (logical insets + flipped translate)
  • Slider tooltip position, Toast stack alignment, Stepper order
  • This site's entire layout — flip dir and look

Physical exceptions

A few things are deliberately physical because mirroring them would be wrong:

  • Media controls and iconography that imply direction (play arrows)
  • Swipe-to-dismiss transforms on toasts — gestures are screen-space
  • Phone-number or code inputs that stay LTR inside RTL pages (set dir="ltr" on the input)

Testing RTL

The fastest test: open this site and set dir="rtl" in DevTools on the <html> element. Every page, sidebar, TOC, and demo mirrors — including these buttons:

۲۰٪