āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/akash3444/basecn/get-started/rtl-support ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
Right-to-left (RTL) text direction support is essential for creating inclusive applications that serve users of languages such as Arabic, Hebrew, Persian, and Urdu. This guide demonstrates how to properly implement RTL support using Base UI components.
<ComponentPreview name="slider-rtl" />RTL support requires both semantic markup and directional context to ensure components render and behave correctly for right-to-left languages. Base UI components are designed to automatically adapt their layout and interaction patterns when placed within an RTL context.
To enable RTL support for Base UI components, you need to:
dir="rtl" attribute on a parent containerDirectionProvider from Base UIdirection="rtl"import { DirectionProvider } from "@base-ui-components/react/direction-provider";
import { Slider } from "@/components/ui/slider";
export default function RTLExample() {
return (
<div dir="rtl">
<DirectionProvider direction="rtl">
<Slider defaultValue={[50]} max={100} step={1} className="max-w-sm" />
</DirectionProvider>
</div>
);
}
For applications that need to support RTL throughout, configure the direction at your application root:
// app/layout.tsx or your root component
import { DirectionProvider } from "@base-ui-components/react/direction-provider";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const direction = "rtl"; // This could come from user preferences or locale detection
return (
<html lang="ar" dir={direction}>
<body>
<DirectionProvider direction={direction}>
{children}
</DirectionProvider>
</body>
</html>
);
}
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā