RTL Support

Mantine is built with emotion supports RTL languages with stylis-plugin-rtl.

Install stylis-plugin-rtl:

yarn add stylis stylis-plugin-rtl
# or with npm
npm install stylis stylis-plugin-rtl

Add stylis-plugin-rtl to your MantineProvider:

import { MantineProvider } from '@mantine/core';
import rtlPlugin from 'stylis-plugin-rtl';
function Demo() {
return (
<MantineProvider emotionOptions={{ key: 'mantine', stylisPlugins: [rtlPlugin] }}>
<App />
</MantineProvider>
);
}

You can apply rtl plugin based on locale. Note that you will have to manage popovers positions in some components (Menu, Popover, etc.) on your side as position and placement props are not flipped based on text direction.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback