ReUI
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>
);