v6.0.35

RTL Support

Mantine is built with emotion which supports RTL languages with stylis-plugin-rtl. You can preview how components work with RTL direction by clicking direction control at the top right corner or pressing Ctrl + Shift + L.

Install stylis-plugin-rtl:

# Install with yarn
yarn add stylis stylis-plugin-rtl


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

Add dir="rtl" to html element:

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

Add stylis-plugin-rtl and theme.dir to your MantineProvider:

import { MantineProvider, createEmotionCache } from '@asuikit/core';
import rtlPlugin from 'stylis-plugin-rtl';


const rtlCache = createEmotionCache({
  key: 'asuikit-rtl',
  stylisPlugins: [rtlPlugin],
});


function Demo() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      emotionCache={rtlCache}
      theme={{ dir: 'rtl' }}
    >
      <App />
    </MantineProvider>
  );
}

Dynamic direction changes

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

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


const rtlCache = createEmotionCache({
  key: 'asuikit-rtl',
  stylisPlugins: [rtlPlugin],
});


function Demo() {
  const [rtl, setRtl] = useState(false);
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{ dir: rtl ? 'rtl' : 'ltr' }}
      emotionCache={rtl ? rtlCache : undefined}
    >
      <div dir={rtl ? 'rtl' : 'ltr'}>
        <Button onClick={() => setRtl((c) => !c)}>Toggle direction</Button>
        <App />
      </div>
    </MantineProvider>
  );
}

RTL with Next.js

See RTL server side rendering setup in custom emotion cache guide.

Go back
Polymorphic components – Guides
Up next
Server side rendering – Guides
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter