Skip to content
LoomiUI LoomiUI LoomiUI

RTL Support

LoomiUI does not provide its own RTL mode. Instead, it follows the standard HTML dir attribute, just like native HTML and CSS. Set dir="rtl" once, and every LoomiUI component automatically switches to a right-to-left layout. No additional props or per-component configuration are required.

This also works with Shadow DOM. Because direction is an inherited CSS property, the value flows from the document into each component’s shadow root. Layouts mirror automatically, just like other inherited styles such as fonts and colors.

Enable RTL

Section titled “Enable RTL”

Enabling RTL is just one HTML attribute.

Add dir="rtl" to your app root (<html> is the most common choice). Once it’s set, all LoomiUI components inside that tree render in right-to-left mode automatically:

<html dir="rtl" lang="ar">
  <body>
    <loomi-button color="primary">حفظ</loomi-button>
  </body>
</html>

 

You can also scope it to a single subtree, or even a single component instance, since the dir attribute applies wherever you set it:

<loomi-slider dir="rtl"></loomi-slider>

How it works

Section titled “How it works”

LoomiUI is built with CSS logical properties, which are direction-aware by default. That means components use rules like margin-inline-start, padding-inline-end, and text-align: start instead of fixed left/right rules like margin-left or text-align: left.

When you set dir="rtl", the browser automatically resolves those logical values for right-to-left layout. Spacing, alignment, and overall structure mirror automatically without extra props or component setup.

Think of this like dark mode: LoomiUI listens to a standard ancestor setting (dir for RTL, .dark for theme) rather than requiring a per-component toggle.

Components with explicit RTL styling

Section titled “Components with explicit RTL styling”

Most components flip automatically with logical CSS properties. A few still need extra RTL-specific styles for details like arrow direction, asymmetric visuals, or drag/fill behavior. LoomiUI includes those styles out of the box:

ComponentWhat flips in RTL
ChatMessage bubble tail position
SliderTrack fill direction (and vertical range orientation)
Tag InputLabel position relative to the input

No extra setup is required. These components follow the same inherited dir attribute as everything else.

Pairing RTL with a translated locale

Section titled “Pairing RTL with a translated locale”

dir="rtl" changes layout direction only. It does not translate text.

To fully support languages like Arabic, combine RTL with LoomiUI’s locale support so built-in component text (placeholders, ARIA labels, datepicker month names, and other defaults) is translated too:

import { setLoomiLocale } from "@loomidev/core";


setLoomiLocale("ar");

ar is a built-in locale. LoomiUI also includes en, de, es, fr, it, ml, pt_BR, tr, and zh_CN.

This only translates LoomiUI’s built-in strings. You still need to translate your app’s own content (labels, button text, and page copy), just like in any regular HTML app.

Section titled “Related”
  • Theming → — the same ancestor-attribute pattern LoomiUI uses for dark mode.
  • Components → — browse every LoomiUI component, RTL included.