Components

RTL Support

This guide helps you to enable the RTL(Right-to-Left) localized support for your app.

Setup

Install Radix Direction

Run the following command to add the Radix Direction provider to hande the direction support for your components:

npm install @radix-ui/react-direction

Add RTL Support

Wrap your application with the DirectionProvider component. This ensures that all components adapt their behavior according to the dir prop.

import { DirectionProvider } from '@radix-ui/react-direction';
 
export default () => (
  <html dir="rtl">
    <body>
      <DirectionProvider dir="rtl">{/* Your app */}</DirectionProvider>
    </body>
  </html>
);

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.