LayoutInternationalization

Right-to-left language support

Build interfaces that work seamlessly for Arabic, Hebrew, Persian, and other RTL languages using logical properties and directional providers.

Direction Provider

Wrap your app or sections to set the text direction.

Use a simple wrapper to set the direction attribute. Components will automatically adapt based on this value.

templ DirectionProvider() {
  <div dir="rtl">
    { children... }
  </div>
}

Logical Properties

Components use native CSS logical properties.

Components are built with logical properties like margin-inline-start ensuring automatic flips in RTL mode.

/* Automatically flips in RTL */
.button {
  margin-inline-start: 0.5rem;
  padding-inline: 1rem;
}

Testing & Verification

Ensure your layouts render correctly in both directions.

Test your components by adding dir="rtl" to your root HTML element. Our component suite is validated to work out of the box with standard RTL configurations.