MantineProvider provides a theme object context value, manages color scheme changes, and injects CSS variables . It must be rendered at the root of your application and should be used only once.
MantineProvider supports the following props:
Pass a theme object override to the theme prop. It will be merged with the default theme and used in all components.
colorSchemeManager is used to retrieve and set the color scheme value in external storage. By default, MantineProvider uses window.localStorage to store the color scheme value, but you can pass your own implementation to the colorSchemeManager prop. You can learn more about color scheme management in the color schemes guide .
The defaultColorScheme value is used when colorSchemeManager cannot retrieve the value from external storage, for example during server-side rendering or when the user hasn't selected a preferred color scheme. Possible values are light , dark , and auto . By default, the color scheme value is light . You can learn more about color scheme management in the color schemes guide .
cssVariablesSelector is a CSS selector to which CSS variables should be added. By default, variables are applied to :root and :host . MantineProvider generates CSS variables based on given theme override and cssVariablesResolver , then these variables are rendered into <style /> tag next to your application. You can learn more about Mantine CSS variables in the CSS variables guide .
withCssVariables determines whether theme CSS variables should be added to the given cssVariablesSelector . By default, it is set to true . You should not change it unless you want to manage CSS variables via a .css file (note that in this case you will need to generate all theme tokens that are not part of the default theme on your side).
deduplicateCssVariables determines whether CSS variables should be deduplicated: if a CSS variable has the same value as in the default theme, it is not added in the runtime. By default, it is set to true . If set to false , all Mantine CSS variables will be added in a <style /> tag even if they have the same value as in the default theme.
deduplicateInlineStyles enables React 19 style tag deduplication for responsive style props . When multiple components share the same responsive style prop values (for example, many list items with mt={{ base: 10, md: 20 }} ), only a single <style /> tag is generated and hoisted to <head /> instead of each component injecting its own.
This can significantly improve performance in scenarios where many components use the same responsive style props. See the styles performance guide for more details.
getRootElement is a function that returns the root application element (usually html ) to set the data-mantine-color-scheme attribute. The default value is () => document.documentElement which means that the data-mantine-color-scheme attribute will be added to the <html /> tag. You can learn more about color scheme management in the color schemes guide .
classNamesPrefix is a prefix for components' static classes (for example {selector}-Text-root ). The default value is mantine – all components will have a mantine- prefix in their static classes .
In this case (default classNamesPrefix ), the Text component will have the following classes:
With classNamesPrefix you can change only the static class :
Now the Text component will have the following classes:
withStaticClasses determines whether components should have static classes, for example, mantine-Button-root . By default, static classes are enabled. To disable them, set withStaticClasses to false :
withGlobalClasses determines whether global classes should be added with a <style /> tag. Global classes are required for hiddenFrom / visibleFrom and lightHidden / darkHidden props to work. By default, global classes are enabled. To disable them, set withGlobalClasses to false . Note that disabling global classes may break styles of some components.
getStyleNonce is a function to generate a nonce attribute added to dynamically generated <style /> tags.
cssVariablesResolver is a function to generate CSS variables styles based on the theme object . You can learn more about Mantine CSS variables in the CSS variables guide .
The env prop can be used in a test environment to disable some features that might impact tests and/or make it harder to test components:
To enable the test environment, set env to test :
Note that env="test" is intended to be used in test environments only with Jest or Vitest . Do not use it in development or production environments. It is also not recommended to be used with end-to-end testing tools like Cypress or Playwright .
Migration guide Tiptap 2 → Tiptap 3