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 control the font family, font size, line height, font weight, and other text-related properties of all Mantine components.
The following CSS variables are used to assign font families to all Mantine components:
Controls the font-family property of most Mantine components
Controls the font-family property of code blocks
Controls the font-family property of headings
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 .
If you want to use system fonts as a fallback for custom fonts, you can reference DEFAULT_THEME value instead of defining it manually:
You can reference font family variables in your CSS:
And in the ff style prop :
Font size variables are used in most Mantine components to control text size. The variable that is chosen depends on the component and its size prop.
You can reference font size variables in CSS:
And in the fz style prop :
To define custom font sizes, can use theme.fontSizes property:
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.
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:
After defining theme.fontSizes , you can reference these variables in your CSS:
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 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:
And in lh style prop :
To define custom line heights, you can use theme.lineHeights property:
theme.headings controls font-size, line-height, font-weight and text-wrap CSS properties of headings in Title and Typography components.
Controls font-weight property of all headings if not overridden
Controls text-wrap property of all headings
These variables are used in Title component, order prop controls which heading level to use. For example, order={3} Title will use:
You can reference heading variables in your CSS:
And in fz and lh style props :
To change heading styles, can use theme.headings property:
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.
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 .
Controls -webkit-font-smoothing CSS property
Controls -moz-osx-font-smoothing CSS property
If you need to override font smoothing values, the best way is to disable theme.fontSmoothing and set global styles on the body element:
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:
The code above will define the following CSS variables:
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:
Background color of filled variant
Background color of filled variant on hover
Background color of light variant
Background color of light variant on hover
Text color of light variant
Border color of outline variant
For example, if you use Button component the following way:
The component will have the following styles:
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 are defined by theme.primaryColor (which must be a key of theme.colors ). The following CSS variables are defined for the primary color:
Shade is 0-9 to reference specific primary color shade
You can reference primary color variables in CSS:
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.
Value of theme.white
Value of theme.black
Color used for text in the body element
Body background color
Color used for error messages and states
Color used for success messages and states
Color used for input placeholders
Color used for dimmed text
Color used for bright text
Color used for links
Background color of default variant
Background color of default variant on hover
Text color of default variant
Border color of default variant
Background color of disabled elements
Text color of disabled elements
Border color of disabled elements
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:
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:
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:
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:
And in components by referencing CSS variable:
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:
Example of adding new CSS variables based on theme.other :
Then you will be able to use --mantine-hero-height and --mantine-color-deep-orange variables in any part of your application: