RTL

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

Docs

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

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

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.

Installation

Skills

On This Page

Setup Applying Direction How it works Animations

RTL

Setup#

Applying Direction#

How it works#

Animations#

Setup

Applying Direction

How it works

Animations