Build faster with Premium Chakra UI Components 💎
Learn moreJanuary 3, 2025
Chakra UI v3.0 supports RTL languages. The key things you need to know are:
dir prop on the html element or any parent elementLocaleProvider component is used to set the locale and dir on logic
based components from Ark UIWhen these are set, the components will be rendered in the correct direction and the accessibility attributes will be set correctly.
هذا مثال على كيفية استخدام موفر اللغة في تطبيقك. يمكنك تغيير اللغة بسهولة.
import { Heading, LocaleProvider, Stack, Text } from "@chakra-ui/react"
import { Slider } from "@/components/ui/slider"
const Demo = () => {
return (
<LocaleProvider locale="ar-AE">
<Stack gap="4" maxW="sm" dir="rtl">
<Heading>مرحباً بكم في تشاكرا يو آي</Heading>
<Text textStyle="body-sm">
هذا مثال على كيفية استخدام موفر اللغة في تطبيقك. يمكنك تغيير اللغة
بسهولة.
</Text>
<Slider defaultValue={[50]} />
</Stack>
</LocaleProvider>
)
}
dir propThe 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>LocaleProvider componentThe 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>