Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

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 a default setting in most browsers. All components scale based on the user's browser font-size settings or font-size of 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 font-size of :root/html element and preserve Mantine components sizes, set scale on theme to the value of 1 / htmlFontSize.

For example, if you set 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 font-size specified on 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'); // -> calc(2rem * var(--mantine-scale))
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)) calc(2rem * var(--mantine-scale))

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,
    },
  },
};

Previous

CSS variables list

Next

style prop

Welcome to Mantine, React components library that you always wished for

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