Theme object
Typography
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 Prismtheme.fontFamily
– controls font-family in all other components except headingstheme.lineHeight
– controls line-height property in all components except headingstheme.fontSizes
– controls font-size in all components except headingstheme.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
Default colors
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:
Primary color
The default primary color is blue
, which means it is referencing theme.colors.blue
.
You can change it to any color defined in theme.colors
.
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
!important theme.primaryColor
cannot be a hex, rgb or other color value,
it should only reference value from theme.colors
:
Primary shade
theme.primaryShade
is used to determine which shade will be used for the components that have color
prop.
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 otherstheme.radius
– border-radius values – used in all components which support radius: Paper, Button, Input and otherstheme.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
Breakpoints
Mantine supports 5 sizes for breakpoints (xs
, sm
, md
, lg
, 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:
Breakpoint | Viewport width |
---|---|
xs | 576px |
sm | 768px |
md | 992px |
lg | 1200px |
xl | 1400px |
Add your own properties to theme
You can add any amount of properties using other
:
TypeScript
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: