rem, em and px units

rem units

All Mantine components use rem units to apply size styles (margin, padding, width, etc.). By default, 1rem is considered to be 16px, as it is the default setting in most browsers. All components scale based on the user's browser font-size settings or font-size of the html/:root.

import { Slider } from '@mantine/core';

function Demo() {
  return (
    <Slider
      defaultValue={100}
      min={70}
      max={130}
      onChange={(value) => {
        document.documentElement.style.fontSize = `${value}%`;
      }}
    />
  );
}

rem units scaling

If you want to change the font-size of the :root/html element and preserve Mantine component sizes, set scale on the theme to the value of 1 / htmlFontSize.

For example, if you set the html font-size to 10px and want to scale Mantine components accordingly, you need to set scale to 1 / (10 / 16) (16 – default font-size) = 1 / 0.625 = 1.6:

:root {
  font-size: 10px;
}

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

const theme = createTheme({
  scale: 1.6,
});

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

em units

em units are used in media queries the same way as rem units, but they are not affected by the font-size specified on the html/:root element. 1em is considered to be 16px.

px conversions

You can use numbers in some Mantine components props. Numbers are treated as px and converted to rem, for example:

import { ColorSwatch } from '@mantine/core';

function DemoPx() {
  // Specify ColorSwatch size in px, it will be automatically converted to rem
  // Width and height of ColorSwatch in this case will be 32px / 16 = 2rem
  return <ColorSwatch color="#000" size={32} />;
}

function DemoRem() {
  // This demo will have the same size as previous one
  return <ColorSwatch color="#000" size="2rem" />;
}

The same conversion happens in style props:

import { Box } from '@mantine/core';

function Demo() {
  // width: calc(2rem * var(--mantine-scale))
  // height: calc(1rem * var(--mantine-scale))
  return <Box w={32} h={16} />;
}

rem and em function

@mantine/core package exports rem and em function that can be used to convert px into rem/em:

import { em, rem } from '@mantine/core';

// numbers and values in px are converted to rem
rem(32); // -> calc(2rem * var(--mantine-scale))
em(32); // -> 2em
rem('16px'); // -> calc(1rem * var(--mantine-scale))
em('16px'); // -> 1em

rem('2rem'); // -> 2rem
em('2rem'); // -> 2rem

rem('50%'); // -> 50%
em('50%'); // -> 50%

rem('5vh'); // -> 5vh
em('5vh'); // -> 5vh

// mixed values are converted to rem
rem('16px 2rem'); // -> calc(1rem * var(--mantine-scale)) 2rem

Convert rem to px

To convert rem/em to px use px function exported from @mantine/core:

import { px } from '@mantine/core';

px('2rem'); // -> 32
px('10rem'); // -> 160

rem/em functions in css files

You can use rem and em function in css files if postcss-preset-mantine is installed:

.demo {
  font-size: rem(16px);

  @media (min-width: em(320px)) {
    font-size: rem(32px);
  }
}

Convert px to rem automatically in css files

To convert px to rem automatically in css files, enable autoRem option in postcss-preset-mantine configuration:

module.exports = {
  plugins: {
    'postcss-preset-mantine': {
      autoRem: true,
    },
  },
};

CSS variables list

style prop