Right-to-left direction

All Mantine components support right-to-left direction out of the box. You can preview how components work with RTL direction by clicking the direction control in the top right corner or pressing Ctrl + Shift + L.

DirectionProvider

The DirectionProvider component is used to set direction for all components inside it. It is required to wrap your application with DirectionProvider if you are planning to either use RTL direction or change direction dynamically.

DirectionProvider supports the following props:

export interface DirectionProviderProps {
  /** Your application */
  children: React.ReactNode;

  /** Direction set as a default value, `ltr` by default */
  initialDirection?: 'rtl' | 'ltr';

  /** Determines whether direction should be updated on mount based on the `dir` attribute set on the root element (usually the html element), `true` by default  */
  detectDirection?: boolean;
}

Setup DirectionProvider in your application:

import { DirectionProvider, MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <DirectionProvider>
      <MantineProvider>{/* Your app here */}</MantineProvider>
    </DirectionProvider>
  );
}

dir attribute

It is required to set the dir attribute on the root element of your application, usually the html element. The DirectionProvider will use its value to set direction on mount if the detectDirection prop is set to true. Note that this guide does not cover setting the dir attribute for different frameworks – follow your framework's documentation to learn how to do it.

<!doctype html>
<!-- Set direction attribute on html element -->
<html dir="rtl">
  <head></head>
  <body></body>
</html>

useDirection hook

useDirection returns an object with the following properties:

dir – current direction
setDirection – function to set direction
toggleDirection – function to change direction to the opposite value

You can use it to create direction control in your application:

import { ActionIcon, useDirection } from '@mantine/core';
import { TextAlignLeftIcon, TextAlignRightIcon } from '@phosphor-icons/react';

function Demo() {
  const { toggleDirection, dir } = useDirection();
  return (
    <ActionIcon onClick={() => toggleDirection()} variant="default" radius="md" size="lg">
      {dir === 'rtl' ? (
        <TextAlignLeftIcon />
      ) : (
        <TextAlignRightIcon />
      )}
    </ActionIcon>
  );
}

rtl mixin

If you have postcss-preset-mantine installed, then you can use the rtl mixin in .css files:

Demo

.demo {
  text-align: center;
  color: var(--mantine-color-white);
  padding: var(--mantine-spacing-md);

  /* LTR styles */
  background-color: var(--mantine-color-blue-filled);

  @mixin rtl {
    /* RTL styles override LTR styles */
    background-color: var(--mantine-color-red-filled);
  }
}

Color functions

Unstyled / headless