Mantine CSS variables

MantineProvider exposes all Mantine CSS variables based on the given theme. You can use these variables in CSS files, style prop or any other styles. Note that not all values are documented on this page, you can find full list of variables on this page.

Typography CSS variables

The following CSS variables are used to control all typography styles (font-family, font-size, line-height) in all Mantine components:

Usage:

.demo {
  font-family: var(--mantine-font-family);
  font-size: var(--mantine-font-size-md);
  line-height: var(--mantine-line-height-md);
}

Spacing

Spacing CSS variables are used to control margins and paddings in most of Mantine components. They are also used in p and m style props:

Usage:

.demo {
  margin: var(--mantine-spacing-md);

  /* With calc */
  padding: calc(var(--mantine-spacing-xl) * 1.5);

  /* Negative value */
  margin-left: calc(var(--mantine-spacing-md) * -1);
}

Shadows

Shadows CSS variables are used to control shadows in all Mantine components that support shadow prop:

Usage:

.demo {
  box-shadow: var(--mantine-shadow-md);
}

Radius

Radius CSS variables are used to control border-radius in all Mantine components that support radius prop:

Usage:

.demo {
  border-radius: var(--mantine-radius-md);
}

Colors

All theme.colors values are exposed as CSS variables in --mantine-color-{x}-{y} format, where x is the color name and y is the color shade. For example, --mantine-color-red-6 is theme.colors.red[6]. You can find the full default colors list in the colors guide.

Usage:

.demo {
  color: var(--mantine-color-red-6);
  background-color: var(--mantine-color-red-0);
}

Variant specific colors

Variant specific variables for each color are exposed in the following format (x is the color name):

• --mantine-color-{x}-filled – filled variant background-color
• --mantine-color-{x}-filled-hover – filled variant background-color on hover
• --mantine-color-{x}-light – light variant background-color
• --mantine-color-{x}-light-hover – light variant background-color on hover
• --mantine-color-{x}-light-color – light variant text color
• --mantine-color-{x}-outline – outline variant border-color and text color
• --mantine-color-{x}-outline-hover – outline variant background-color on hover

Usage:

.demo {
  background-color: var(--mantine-color-blue-filled);
  color: var(--mantine-color-white);

  @mixin hover {
    background-color: var(--mantine-color-blue-filled-hover);
  }
}

Other colors variables

• --mantine-color-white – value of theme.white
• --mantine-color-black – value of theme.black
• --mantine-color-text – text color set on body element
• --mantine-color-body – body element background-color
• --mantine-color-error – error color, used in Input and other similar components
• --mantine-color-placeholder – placeholder color, used in Input and other similar components to set text color of placeholder
• --mantine-color-anchor – anchor color, used in Anchor component
• --mantine-color-default – default variant background-color
• --mantine-color-default-hover – default variant background-color on hover
• --mantine-color-default-color – default variant text color
• --mantine-color-default-border – default variant border-color

Usage:

.demo {
  background-color: var(--mantine-color-body);

  &[data-error] {
    color: var(--mantine-color-error);
  }

  &::placeholder {
    color: var(--mantine-color-placeholder);
  }
}

CSS variables resolver

cssVariablesResolver prop on MantineProvider allows you to modify values of Mantine CSS variables or even add your own variables. cssVariablesResolver is a function that accepts theme as a single argument and returns an object with CSS variables divided into three groups:

• variables – variables that do not depend on color scheme
• light – variables for light color scheme only
• dark – variables for dark color scheme only

Example of adding new CSS variables based on theme.other:

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

const themeOverride = createTheme({
  other: {
    deepOrangeLight: '#E17900',
    deepOrangeDark: '#FC8C0C',
    heroHeight: rem(400),
  },
});

const resolver: CSSVariablesResolver = (theme) => ({
  variables: {
    '--mantine-hero-height': theme.other.heroHeight,
  },
  light: {
    '--mantine-color-deep-orange': theme.other.deepOrangeLight,
  },
  dark: {
    '--mantine-color-deep-orange': theme.other.deepOrangeDark,
  },
});

function Demo() {
  return (
    <MantineProvider theme={themeOverride} cssVariablesResolver={resolver}>
      <App />
    </MantineProvider>
  );
}

Then you will be able to use --mantine-hero-height and --mantine-color-deep-orange variables in any part of your application:

.hero {
  height: var(--mantine-hero-height);

  /* background color will automatically change based on color scheme */
  background-color: var(--mantine-color-deep-orange);
}