@mantine/core package includes some global styles that are required for components to work correctly.
If you override these styles, some components might not work as expected.
Global styles are automatically imported with:
@mantine/core package includes minimal CSS reset – it includes only basic styles required for components to work
in modern browsers. If you need to support older browsers, you can additionally include normalize.css
or any other CSS reset of your choice.
@mantine/core package includes the following
:root elements styles:
@mantine/core package includes the following static classes:
mantine-focus-never– removes default browser focus ring
You can use these classes with any components or elements:
It is recommended to use CSS modules to apply styles to Mantine components
className prop or with Styles API. CSS modules files names usually
.module.css, if you want to add global styles to your application, create a file with
.css extension but without
.module part, for example
.css files you can reference all Mantine CSS variables and
change styles of
:root and other elements. For example, to change body background-color: