By default, Mantine uses system fonts. You can change fonts and other text styles for headings, code and all other components:
theme.fontFamilyMonospace– controls font-family of components that require monospace font, for example, Code, Kbd and Prism
theme.fontFamily– controls font-family in all other components except headings
theme.lineHeight– controls line-height property in all components except headings
theme.fontSizes– controls font-size in all components except headings
theme.headings– controls font-family, line-height and font-size of h1-h6 tags in Title and TypographyStylesProvider components
Greycliff CF or sans-serif title
Monaco, Courier Code
Mantine uses open-color in default theme with some additions. Each color has 10 shades.
Colors are exposed on theme object as an array of strings, you can access color shade by color name and index (0-9), colors with larger index are darker:
Extend or replace colors
You can add extra colors. This will allow you to use these colors with all components which support color change, for example, Button, Badge or Switch.
Note that all colors that are added should always include 10 shades. You can use some of these tools to generate or copy ready color palettes:
The default primary color is
blue, which means it is referencing
You can change it to any color defined in
Primary color is used:
- in some components to determine color value if component didn't receive color prop;
- to define focus styles for all interactive elements.
For example, Button Component by default will use
theme.primaryColor cannot be a hex, rgb or other color value,
it should only reference value from
theme.primaryShade is used to determine which shade will be used for the components that have
Note that for some variants with dark color scheme
primaryShade will not be used as it will cause contrast issues.
primaryShade can also be customized for dark and light color scheme separately:
Spacing, radius and shadows
Mantine supports 5 sizes for spacing, radius and shadows: xs, sm, md, lg, xl. These values are exposed on theme:
theme.spacing– general spacing values used for paddings and margins, for example, to set padding on Paper or Container components or to calculate margins in TypographyStylesProvider component.
theme.shadows– box-shadow values – used with components which extend Paper: Modal, Menu and others
theme.radius– border-radius values – used in all components which support radius: Paper, Button, Input and others
theme.defaultRadius– default border-radius used in all components
You can change size values by setting corresponding properties. In the following example:
- xs and xl values from theme will be overwritten
- sm, md and lg values will be used from default theme
Mantine supports 5 sizes for breakpoints (
xl), which are used in Grid, SimpleGrid and other components.
You can change the breakpoints by setting corresponding properties. In this example:
- sm and lg values from theme will be overwritten
- xs, md and xl values will be used from default theme
Mantine uses Bootstrap's breakpoint values as defaults:
Add your own properties to theme
You can add any amount of properties using
Adding custom colors
TypeScript will only autocomplete Mantine's default colors when accessing the theme. To add your custom colors to the MantineColor type, you can use TypeScript module declaration:
Adding custom 'other' properties
Similar to how you can extend/set custom colors, you can add your own properties to the
theme.other type using TypeScript module declaration: