Right-to-Left (RTL)

UI support for right-to-left (RTL) languages such as Arabic and Hebrew.

Usage

HTML Setup

Make sure the dir attribute is set on the html element:

<html dir="rtl"></html>

Configure CustomProvider (Optional)

This step is optional. By default, components will determine whether to enable RTL layout based on the dir attribute on the html element. If you need to enable RTL layout for a specific area, you can set the rtl prop on the CustomProvider component to render components with RTL layout.

import { CustomProvider } from 'rsuite';

function App({ children }) {
  return <CustomProvider rtl>{children}</CustomProvider>;
}