All Mantine components support right-to-left direction out of the box.
You can preview how components work with RTL direction by clicking direction control
in the top right corner or pressing
Ctrl + Shift + L.
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:
DirectionProvider in your application:
It is required to set
dir attribute on the root element of your application, usually it is
DirectionProvider will use its value to set direction on mount if
detectDirection prop is set to
Note that this guide does not cover setting
dir attribute for different frameworks – follow your framework
documentation to learn how to do it.
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:
If you have postcss-preset-mantine installed then you can use
rtl mixin in