MantineProvider

MantineProvider provides 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 user only once.

Usage

import { MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  /** Your theme override here */
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <App />
    </MantineProvider>
  );
}

MantineProvider props

MantineProvider supports the following props:

interface MantineProviderProps {
  /** Theme override object */
  theme?: MantineThemeOverride;

  /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */
  colorSchemeManager?: MantineColorSchemeManager;

  /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `auto` by default */
  defaultColorScheme?: MantineColorScheme;

  /** CSS selector to which CSS variables should be added, `:root` by default */
  cssVariablesSelector?: string;

  /** Determines whether theme CSS variables should be added to given `cssVariablesSelector`, `true` by default */
  withCssVariables?: boolean;

  /** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */
  getRootElement?(): HTMLElement | undefined;

  /** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */
  classNamesPrefix?: string;

  /** Function to generate nonce attribute added to all generated `<style />` tags */
  getStyleNonce?(): string;

  /** Function to generate CSS variables based on theme object */
  cssVariablesResolver?: CSSVariablesResolver;

  /** Your application */
  children?: React.ReactNode;
}

theme

Pass theme object override to theme prop. It will be merged with the default theme and used in all components.

import { MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  fontFamily: 'Open Sans, sans-serif',
  primaryColor: 'cyan',
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <App />
    </MantineProvider>
  );
}

colorSchemeManager

colorSchemeManager is used to retrieve and set color scheme value in external storage. By default, MantineProvider uses window.localStorage to store color scheme value, but you can pass your own implementation to colorSchemeManager prop. You can learn more about color scheme management in the color schemes guide.

import { MantineProvider, localStorageColorSchemeManager } from '@mantine/core';

const colorSchemeManager = localStorageColorSchemeManager({ key: 'my-app-color-scheme' });

function Demo() {
  return (
    <MantineProvider colorSchemeManager={colorSchemeManager}>
      <App />
    </MantineProvider>
  );
}

defaultColorScheme

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, it is set to auto, which means that the color scheme will be determined based on user system preferences. You can learn more about color scheme management in the color schemes guide.

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider defaultColorScheme="dark">
      <App />
    </MantineProvider>
  );
}

cssVariablesSelector

cssVariablesSelector is a CSS selector to which CSS variables should be added. By default, it is :root. 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.

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider cssVariablesSelector="html">
      <App />
    </MantineProvider>
  );
}

withCssVariables

withCssVariables determines whether theme CSS variables should be added to given cssVariablesSelector. By default, it is set to true, you should not change it unless you want to manage CSS variables via .css file (Note that in this case you will need to generate all theme tokens that are not a part of the default theme on your side).

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider withCssVariables={false}>
      <App />
    </MantineProvider>
  );
}

getRootElement

getRootElement is a function that returns the root application (usually html) element to set data-mantine-color-scheme attribute. Default value is () => document.documentElement which means that data-mantine-color-scheme attribute will be added to <html /> tag. You can learn more about color scheme management in the color schemes guide.

import { MantineProvider } from '@mantine/core';

const getRootElement = () => (typeof window === 'undefined' ? undefined : document.body);

function Demo() {
  return (
    <MantineProvider getRootElement={getRootElement}>
      <App />
    </MantineProvider>
  );
}

classNamesPrefix

classNamesPrefix is a prefix for components static classes (for example {selector}-Text-root). Default value is mantine – all components will have mantine- prefix in their static classes.

import { Text, MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider>
      <Text>Just some text</Text>
    </MantineProvider>
  );
}

In this case (default classNamesPrefix), Text component will have the following classes:

• mantine-focus-auto – global utility class
• m-3nrA4eL – component class, usually a random string, with this class library styles are applied
• mantine-Text-root – component static class, part of Styles API

With classNamesPrefix you can change only static class:

import { Text, MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider classNamesPrefix="app">
      <Text>Just some text</Text>
    </MantineProvider>
  );
}

Now Text component will have the following classes:

• mantine-focus-auto – classNamesPrefix does not impact global utility classes – it is static and cannot be changed
• m-3nrA4eL – classNamesPrefix does not impact library class – it is static and cannot be changed
• app-Text-root – component static class has classNamesPrefix instead of mantine

getStyleNonce

getStyleNonce is a function to generate nonce attribute added to dynamic generated <style /> tags.

cssVariablesResolver

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.

MantineThemeProvider

MantineThemeProvider allows overriding theme values for a subtree of components. Note that values that are used to generate CSS variables cannot be overridden with MantineThemeProvider. For example, you cannot use MantineThemeProvider to override colors or fontSizes.

import { MantineThemeProvider, Button, Group } from '@mantine/core';

function Demo() {
  return (
    <MantineThemeProvider>
      <Group>
        <Button>Default button</Button>

        <MantineThemeProvider theme={{ primaryColor: 'red' }}>
          <Button>Inside MantineThemeProvider</Button>
        </MantineThemeProvider>
      </Group>
    </MantineThemeProvider>
  );
}

Difference between MantineProvider and MantineThemeProvider

MantineProvider is used for:

• Color scheme management
• CSS variables generation
• Providing theme context

MantineThemeProvider is only used to change theme context – it does not generate CSS variables or manage color scheme.

It is not recommended to have more than one MantineProvider in your application, but you can have as many MantineThemeProvider as you need.