RTL

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

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

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

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">
    {/* Your app */}
  </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}>
      {/* Your app content */}
    </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.

On This Page

Setup Applying Direction How it works Animations