Right to left

In order to support the habits of languages ​​such as Arabic and Hebrew, the UI of the language read from right to left (RTL).



Make sure the dir attribute is set on the body:

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


Set the rtl property on the CustomProvider component, and all components are rendered according to the RTL layout.

function RTL(props) {
  return <CustomProvider rtl>{props.children}</CustomProvider>;

3.Import RTL style files

  • Including the RTL version when using the compiled React Suite CSS
@import '~rsuite/dist/rsuite-rtl.min.css';
  • Processing the final CSS via rtlcss in case of using the Less version
@import '~rsuite/styles/index.less';
Vercel banner