RTL Support

January 3, 2025

Chakra UI v3.0 supports RTL languages. The key things you need to know are:

The dir prop on the html element or any parent element
The LocaleProvider component is used to set the locale and dir on logic based components from Ark UI

When these are set, the components will be rendered in the correct direction and the accessibility attributes will be set correctly.

مرحباً بكم في تشاكرا يو آي

هذا مثال على كيفية استخدام موفر اللغة في تطبيقك. يمكنك تغيير اللغة بسهولة.

The dir prop on the html element or any parent element will set the direction of the component.

<html dir="rtl">  <Heading>RTL - الى أن مرجع ويتّفق, ان </Heading>  <Slider /> </html>

The LocaleProvider component is used to set the locale and dir on logic based components from Ark UI.

<LocaleProvider locale="ar-Ar">  <Heading>RTL - الى أن مرجع ويتّفق, ان </Heading>  <Slider /> </LocaleProvider>

Ensure you wrap the root component in the LocaleProvider component.

Bringing it all together, here's how the RTL support works:

<LocaleProvider locale="ar-Ar">  <Stack dir="rtl">  <Heading>RTL - الى أن مرجع ويتّفق, ان </Heading>  <Slider />  </Stack> </LocaleProvider>