import { TitleDemos } from '@docs/demos'; import { CssVariablesGroup } from '@/components/CssVariablesGroup'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.CssVariables);

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 variables

Typography variables control the font family, font size, line height, font weight, and other text-related properties of all Mantine components.

Font family

The following CSS variables are used to assign font families to all Mantine components:

You can control these variables in the theme. Note that if theme.headings.fontFamily is not set, the --mantine-font-family-headings value will be the same as --mantine-font-family.

tsx

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

const theme = createTheme({
  // Controls --mantine-font-family
  fontFamily: 'Arial, sans-serif',

  // Controls --mantine-font-family-monospace
  fontFamilyMonospace: 'Courier New, monospace',

  headings: {
    // Controls --mantine-font-family-headings
    fontFamily: 'Georgia, serif',
  },
});

If you want to use system fonts as a fallback for custom fonts, you can reference DEFAULT_THEME value instead of defining it manually:

tsx

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

const theme = createTheme({
  fontFamily: `Roboto, ${DEFAULT_THEME.fontFamily}`,
});

You can reference font family variables in your CSS:

scss

.text {
  font-family: var(--mantine-font-family);
}

.code {
  font-family: var(--mantine-font-family-monospace);
}

.heading {
  font-family: var(--mantine-font-family-headings);
}

And in the ff style prop:

ff="text" will use --mantine-font-family variable
ff="monospace" will use --mantine-font-family-monospace variable
ff="heading" will use --mantine-font-family-headings variable

tsx

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

function Demo() {
  return (
    <Text ff="monospace">
      This text uses the --mantine-font-family-monospace variable
    </Text>
  );
}

You can reference font size variables in CSS:

scss

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

And in the fz style prop:

tsx

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

function Demo() {
  return (
    <Text fz="xl">
      This text uses --mantine-font-size-xl variable
    </Text>
  );
}

To define custom font sizes, can use theme.fontSizes property:

tsx

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

const theme = createTheme({
  fontSizes: {
    xs: '0.5rem',
    sm: '0.75rem',
    md: '1rem',
    lg: '1.25rem',
    xl: '1.5rem',
  },
});

Note that theme.fontSizes object is merged with the DEFAULT_THEME.fontSizes – it is not required to define all values, only those that you want to change.

tsx

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

// Changes only xs font size,
// other values will be taken from the DEFAULT_THEME
const theme = createTheme({
  fontSizes: {
    xs: '0.5rem',
  },
});

You can add any number of additional font sizes to the theme.fontSizes object. These values will be defined as CSS variables in --mantine-font-size-{size} format:

tsx

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

const theme = createTheme({
  fontSizes: {
    xxs: '0.125rem',
    xxl: '2rem',
  },
});

After defining theme.fontSizes, you can reference these variables in your CSS:

scss

.demo {
  font-size: var(--mantine-font-size-xxs);
}

Case conversion

Case conversion (camelCase to kebab-case) is not automatically applied to custom font sizes. If you define theme.fontSizes with camelCase keys, you need to reference them in camelCase format. For example, if you define { customSize: '1rem' }, you need to reference it as --mantine-font-size-customSize.

Line height

Line height variables are used in Text component. In other components, line-height is either calculated based on font size or set to --mantine-line-height, which is an alias for --mantine-line-height-md.

You can reference line height variables in your CSS:

scss

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

And in lh style prop:

tsx

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

function Demo() {
  return (
    <Text lh="xl">
      This text uses --mantine-line-height-xl variable
    </Text>
  );
}

To define custom line heights, you can use theme.lineHeights property:

tsx

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

const theme = createTheme({
  lineHeights: {
    xs: '1.2',
    sm: '1.3',
    md: '1.4',
    lg: '1.5',
    xl: '1.6',
  },
});

Headings

theme.headings controls font-size, line-height, font-weight and text-wrap CSS properties of headings in Title and Typography components.

These variables are used in Title component, order prop controls which heading level to use. For example, order={3} Title will use:

--mantine-h3-font-size
--mantine-h3-line-height
--mantine-h3-font-weight

You can reference heading variables in your CSS:

scss

.h1 {
  font-size: var(--mantine-h1-font-size);
  line-height: var(--mantine-h1-line-height);
  font-weight: var(--mantine-h1-font-weight);
}

And in fz and lh style props:

tsx

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

function Demo() {
  return (
    <Box fz="h1" lh="h1">
      This text uses --mantine-h1-* variables
    </Box>
  );
}

To change heading styles, can use theme.headings property:

tsx

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

const theme = createTheme({
  headings: {
    sizes: {
      h1: {
        fontSize: '2rem',
        lineHeight: '1.5',
        fontWeight: '500',
      },
      h2: {
        fontSize: '1.5rem',
        lineHeight: '1.6',
        fontWeight: '500',
      },
    },
    // ...
  },
});

theme.headings object is deeply merged with the DEFAULT_THEME.headings object – it is not required to define all values, only those that you want to change.

tsx

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

// Changes only font-size of h1,
// other values will be taken from the DEFAULT_THEME
const theme = createTheme({
  headings: {
    sizes: {
      h1: {
        fontSize: '2rem',
      },
    },
  },
});

Font smoothing

Font smoothing variables control -webkit-font-smoothing and moz-osx-font-smoothing CSS properties. These variables are used to make text look better on screens with high pixel density.

Font smoothing variables are controlled by theme.fontSmoothing theme property, it is true by default. If theme.fontSmoothing is false, both variables will be set to unset.

If you need to override font smoothing values, the best way is to disable theme.fontSmoothing and set global styles on the body element:

tsx

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

// Disable font smoothing in your theme
const theme = createTheme({
  fontSmoothing: false,
});

scss

// Add global styles to your project with desired font smoothing values
body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

Colors variables

Colors variables are controlled by theme.colors and theme.primaryColor. Each color defined in theme.colors object is required to have 10 shades. Theme color can be referenced by its name and shade index, for example, --mantine-color-red-6.

You can define new colors on the theme object or override existing colors:

tsx

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

const theme = createTheme({
  colors: {
    demo: [
      '#FF0000',
      '#FF3333',
      '#FF6666',
      '#FF9999',
      '#FFCCCC',
      '#FFEEEE',
      '#FFFAFA',
      '#FFF5F5',
      '#FFF0F0',
      '#FFEBEB',
    ],
  },
});

The code above will define the following CSS variables:

Variant colors

Some Mantine components like Button or Badge have variant prop that in combination with color prop controls the component text, background and border colors. For each variant and color, Mantine defines a set of CSS variables that control these colors. For example, for the default blue color the following CSS variables are defined:

For example, if you use Button component the following way:

tsx

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

function Demo() {
  return (
    <Button color="pink" variant="filled">
      Filled pink button
    </Button>
  );
}

The component will have the following styles:

Background color will be var(--mantine-color-pink-filled)
Background color on hover will be var(--mantine-color-pink-filled-hover)
Text color will be var(--mantine-color-white)
Border color will be transparent

Note that the variables above are not static, they are generated based on the values of theme.colors and theme.primaryShade. Additionally, their values are different for dark and light color schemes.

Variant colors variables are used in all components that support color prop, for example, Button, Badge, Avatar and Pagination. Colors values that are used by these components are determined by cssVariablesResolver described below and variantColorResolver.

Primary color variables

Primary color variables are defined by theme.primaryColor (which must be a key of theme.colors). The following CSS variables are defined for the primary color:

You can reference primary color variables in CSS:

scss

.demo {
  color: var(--mantine-primary-color-0);
  background-color: var(--mantine-primary-color-filled);
}

Other color variables

The following colors are used in various Mantine components. Note that default values are provided for the light color scheme, dark color scheme values are different.

Spacing variables

theme.spacing values are used in most Mantine components to control paddings, margins, and other spacing-related properties. The following CSS variables are defined based on theme.spacing:

To define custom spacing values, use theme.spacing property:

tsx

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

const theme = createTheme({
  spacing: {
    xs: '0.5rem',
    sm: '0.75rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem',
  },
});

Border radius variables

Mantine components that support radius prop use border radius variables to control border radius. The following CSS variables are defined based on theme.radius:

Additionally, --mantine-radius-default variable is defined based on theme.defaultRadius value. If radius prop on components is not set explicitly, --mantine-radius-default is used instead.

To define custom border radius values, use theme.radius and theme.defaultRadius properties:

tsx

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

const theme = createTheme({
  defaultRadius: 'sm',
  radius: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '2rem',
    xl: '3rem',
  },
});

Shadow variables

Shadow variables are used in all Mantine components that support shadow prop. The following CSS variables are defined based on theme.shadows:

To define custom shadow values, use theme.shadows property:

tsx

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

const theme = createTheme({
  shadows: {
    xs: '0 1px 2px rgba(0, 0, 0, 0.1)',
    sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
    md: '0 2px 4px rgba(0, 0, 0, 0.1)',
    lg: '0 4px 8px rgba(0, 0, 0, 0.1)',
    xl: '0 8px 16px rgba(0, 0, 0, 0.1)',
  },
});

z-index variables

z-index variables are defined in @mantine/core/styles.css. Unlike other variables, z-index variables are not controlled by the theme and are not exposed in the theme object.

You can reference z-index variables in CSS:

css

/* Display content above the modal */
.my-content {
  z-index: calc(var(--mantine-z-index-modal) + 1);
}

And in components by referencing CSS variable:

tsx

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

function Demo() {
  return (
    <Modal
      zIndex="var(--mantine-z-index-max)"
      opened
      onClose={() => {}}
    >
      Modal content
    </Modal>
  );
}

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:

tsx

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

const themeOverride = createTheme({
  other: {
    deepOrangeLight: '#E17900',
    deepOrangeDark: '#FC8C0C',
    heroHeight: 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}
    >
    </MantineProvider>
  );
}

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

css

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

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

Mantine CSS variables

Mantine CSS variables

Typography variables

Font family

Font size

Line height

Headings

Font smoothing

Colors variables

Variant colors

Primary color variables

Other color variables

Spacing variables

Border radius variables

Shadow variables

z-index variables

CSS variables resolver