RTL Support

Mantine is built with emotion which 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.

Dynamic direction changes

To make rtl dynamic, change cache key when cache changes:

import { useState } from 'react';
import { MantineProvider, Button } from '@mantine/core';
import rtlPlugin from 'stylis-plugin-rtl';

function Demo() {
  const [rtl, setRtl] = useState(false);
  return (
    <MantineProvider
      theme={{ dir: rtl ? 'rtl' : 'ltr' }}
      emotionOptions={
        rtl
          ? // rtl cache
            { key: 'mantine-rtl', stylisPlugins: [rtlPlugin] }
          : // ltr cache
            { key: 'mantine' }
      }
    >
      <Button onClick={() => setRtl((c) => !c)}>Toggle rtl/ltr</Button>
      <App />
    </MantineProvider>
  );
}

RTL with Next.js

To setup RTL support for Next.js:

Replace your _document.tsx with

import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
import rtlPlugin from 'stylis-plugin-rtl';
import { ServerStyles, createStylesServer } from '@mantine/next';

export default class _Document extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    const stylesServer = createStylesServer({ key: 'rtl', stylisPlugins: [rtlPlugin] });

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <ServerStyles html={initialProps.html} server={stylesServer} />
        </>
      ),
    };
  }

  render() {
    return (
      <Html dir="rtl" lang={this.props.locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

In your _app.tsx set dir: 'rtl' prop on theme and provide emotionOptions, important! emotionOptions should be the same as you've provided in createStylesServer:

import { AppProps } from 'next/app';
import rtlPlugin from 'stylis-plugin-rtl';
import { MantineProvider } from '@mantine/core';

export default function App(props: AppProps) {
  const { Component, pageProps } = props;

  return (
    <MantineProvider
      theme={{ dir: 'rtl' }}
      emotionOptions={{ key: 'rtl', stylisPlugins: [rtlPlugin] }}
    >
      <Component {...pageProps} />
    </MantineProvider>
  );
}

Go back

Styles API – Theming

Up next

Server side rendering – Theming

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

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

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter