This guide will help you get familiar with core Mantine concepts. Please read this guide, theming and styles sections before starting development to learn about all of the available theming and styling features.
MantineProvider is required to be rendered at the root of your application. It is responsible for:
- Providing theme context
- Adding CSS variables to the document
- Managing color scheme (light, dark, auto)
Theme object stores design tokens, components default props, context styles
and other data that can be accessed by any Mantine component. Most of the
theme values are exposed as
Access theme values in styles:
Colors are stored in
theme.colors object and are exposed as CSS variables.
Each color must have at least 10 shades. You can generate new colors based on a single color value
with the colors generator.
Colors are numbered from 0 to 9 where 0 is the lightest and 9 is the darkest color. Example of
color from the default theme:
To access colors in styles use CSS variables:
All Mantine components use CSS modules for styling. It is recommended to use CSS modules in your project as well, but it is not required – Mantine components are fully compatible with any third-party styling solution and native CSS.
CSS modules are available in most modern frameworks out of the box. To use them, create a file with
And then import it in your component:
postcss-preset-mantine provides several CSS functions and mixins to simplify your styles. It is not required to use it, but highly recommended. All demos that feature styles assume that you have this preset installed.
postcss-preset-mantine allows you to use functions and mixins in
Styles API is a set of props and techniques that allows you to customize styles of any element inside Mantine component inline or with theme object. All Mantine components that have styles support Styles API.
Every Mantine component has a set of elements names that can be used to apply styles to inner elements inside the component. Example of TextInput component selectors:
These selectors can be used to apply styles to inner elements with classNames or styles props:
All Mantine components support
auto color schemes. By default,
the color scheme is
light, it can be changed by the user and will be persisted in
You can use configure the default color scheme on MantineProvider:
And use useMantineColorScheme hook to create color scheme toggle control:
You can use Mantine as a headless UI library. To do that, simply do not import
in your application. Then you will be able to apply styles to Mantine components using the Styles API
with a styling solution of your choice.
All components also support unstyled prop that removes all library styles from the component: