RTL

Copy Markdown

Right-to-left support for Arabic, Hebrew, Persian, and other RTL languages.

Docs

EnglishArabic (عربي)Hebrew (עברית)

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

إنشاء حساب

البريد الإلكتروني

كلمة المرورنسيت كلمة المرور؟

تسجيل الدخولتسجيل الدخول باستخدام Google

Setup#

Wrap your app with LocaleProvider and pass an RTL locale. Use this when you know the user’s language ahead of time or when the app switches locale dynamically.

import { LocaleProvider } from "@/components/ui/locale";

export const App = () => (
  <LocaleProvider locale="ar-BH">
  </LocaleProvider>
);

Common RTL locales include ar-BH, ar-SA, he-IL, and fa-IR.

Note: If no LocaleProvider is set up, the default locale is en-US and the direction stays ltr.

Applying Direction#

Read the current dir from useLocale and pass it to your root element—usually <html>—so the layout renders correctly and child components inherit the right text direction.

import { LocaleProvider, useLocale } from "@/components/ui/locale";

const AppContent = () => {
  const { locale, dir } = useLocale();

  return (
    <html dir={dir} lang={locale}>
    </html>
  );
};

Shark UI components rely on logical CSS properties wherever possible. That means spacing and layout use ms-*, me-*, ps-*, pe-*, and start-* / end-* instead of physical ones like ml-*, mr-*, left-*, or right-*. When you flip dir to rtl, the layout adapts automatically because those utilities follow the text direction.

Setting dir={dir} on the root ensures that direction propagates down. Ark UI’s overlays, tooltips, and menus respect the document direction, so they position themselves correctly whether the user reads left-to-right or right-to-left.

Animations#

Animations should follow the reading direction. Physical utilities like slide-in-from-right will slide the wrong way in RTL. Use logical alternatives so motion stays consistent:

slide-in-from-end / slide-out-to-end instead of slide-in-from-right / slide-out-to-right
slide-in-from-start / slide-out-to-start instead of slide-in-from-left / slide-out-to-left

For the full API reference, see the Ark UI documentation.

[

Skills ](/docs/skills)[

LLMs.txt ](/docs/llms-txt)

On This Page

Setup Applying Direction How it works Animations

RTL

RTL

Setup#

Applying Direction#

How it works#

Animations#