rem, em and px units

rem and em units

All Mantine components use rem units to apply size styles. 1rem is considered to be 16px with medium text size selected by user, all components will scale based on settings specified in browser. em units are used for theme.breakpoints and responsive styles.

px conversions

You can use numbers in Mantine components props, it will be 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 logic is applied to style props available in every component:

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


function Demo() {
  // width: 2rem, height: 1rem
  // margin-left: 1rem
  // @media (min-width: theme.breakpoints.sm) -> margin-left: 2rem
  return <Box w={32} h={16} ml={{ base: 16, sm: 32 }} />;
}

rem and em function

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

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


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


// other values are returned as is
rem('2rem'); // -> 2rem
em('2rem'); // -> 2rem


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


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

Convert rem to px

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

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


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

rem in emotion styles

createStyles, sx prop and styles do not perform automatic rem units conversion. When you write styles it is recommended to either specify all size values in rem or use rem function to convert px to rem:

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


createStyles({
  button: {
    // specify sizes in rem
    width: '1rem',


    // or use rem function to convert px
    border: `${rem(2)} solid gray`,
  },
});
Go back
Emotion cache – Theming
Up next
sx prop – Styles
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