MantineProvider

MantineProvider component can be used to change theme. It is not required if you decide to use the default theme.

Usage

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

function App() {
  return <Button>My app button</Button>;
}

// Custom theme is applied to all components in App
function Demo() {
  return (
    <MantineProvider theme={{ fontFamily: 'Open Sans' }} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

CSS reset and global styles

MantineProvider has an option to add css reset similar to normalize.css (withNormalizeCSS) and global styles (withGlobalStyles). It is recommended to enable these options.

withGlobalStyles prop will add the following styles:

background-color to theme.colors.dark[7] in dark color scheme and theme.white in light
color to theme.colors.dark[0] in dark color scheme and theme.black in light
font-family and font-smoothing based on theme
font-size to theme.fontSizes.md

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

function Demo() {
  return (
    <MantineProvider withNormalizeCSS withGlobalStyles>
      <App />
    </MantineProvider>
  );
}

If you prefer to style components with CSS/SCSS or other styling solutions that do not have access to Mantine theme context, then you can use Mantine CSS variables. To add CSS variables to the :root set withCSSVariables prop on MantineProvider:

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

function Demo() {
  return (
    <MantineProvider withCSSVariables withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Then you will be able to use variables anywhere in your CSS:

.my-button {
  background-color: var(--mantine-color-blue-6);
  font-family: var(--mantine-font-family);
  line-height: var(--mantine-line-height);
}

Mantine exposes the following CSS variables based on theme you provide:

--mantine-color-white
--mantine-color-black
--mantine-transition-timing-function
--mantine-line-height
--mantine-font-family
--mantine-font-family-monospace
--mantine-font-family-headings
--mantine-heading-font-weight
--mantine-shadow-{size}, e.g. --mantine-shadow-sm, --mantine-shadow-xl
--mantine-radius-{size}, e.g. --mantine-radius-sm, --mantine-radius-xl
--mantine-spacing-{size}, e.g. --mantine-spacing-sm, --mantine-spacing-xl
--mantine-font-size-{size}, e.g. --mantine-font-size-sm, --mantine-font-size-xl
--mantine-color-{color}-{shade}, e.g. --mantine-color-blue-6, --mantine-color-gray-0
--mantine-{heading}-font-size, e.g. --mantine-h1-font-size
--mantine-{heading}-line-height, e.g, --mantine-h3-line-height

Nested MantineProviders

If some parts of your application require different theme settings, you can wrap them with another MantineProvider:

Georgia or serif text

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

function Demo() {
  return (
    <MantineProvider theme={{ fontFamily: 'Georgia, serif' }}>
      <Text align="center" mb="xs">Georgia or serif text</Text>

      <MantineProvider theme={{ fontFamily: 'Greycliff CF, sans-serif' }}>
        <Button>Greycliff CF button</Button>
      </MantineProvider>
    </MantineProvider>
  );
}

Note that nested MantineProvider will inherit theme override from parent provider only if inherit prop is set:

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

function App() {
  return (
    // Parent MantineProvider
    <MantineProvider withGlobalStyles withNormalizeCSS theme={{ colorScheme: 'dark' }}>
      <Button>Affected only by parent provider</Button>
      {/*
        Child MantineProvider, inherits theme from parent MantineProvider.
        Other properties specified on child provider will override parent props.
        For example, in this case theme override will be:
        { colorScheme: 'dark', primaryColor: 'red' }
      */}
      <MantineProvider theme={{ primaryColor: 'red' }} inherit>
        <Button>Affected only by child provider</Button>
      </MantineProvider>
    </MantineProvider>
  );
}

Styles on MantineProvider

You can add context styles to components that support Styles API with MantineProvider. All components that are rendered inside MantineProvider will inherit those styles:

Dot badge

import { MantineProvider, Group, Button, Badge, ButtonStylesParams } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            // Subscribe to theme and component params
            styles: (theme, params: ButtonStylesParams, { variant }) => ({
              root: {
                height: '2.625rem',
                padding: '0 1.875rem',
                backgroundColor:
                  variant === 'filled'
                    ? theme.colors[params.color || theme.primaryColor][9]
                    : undefined,
              },
            }),
          },

          Badge: {
            // Use raw styles object if you do not need theme dependency
            styles: {
              root: { borderWidth: '0.125rem' },
            },
          },
        },
      }}
    >
      <Group position="center">
        <Button variant="outline">Outline button</Button>
        <Button variant="filled" color="cyan">Filled button</Button>
        <Badge variant="dot">Dot badge</Badge>
      </Group>
    </MantineProvider>
  );
}

Root selector

If component does not specify Styles API selectors, then in most cases you can add styles using root selector:

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

function App() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        components: {
          Text: {
            styles: {
              root: { fontSize: 20 },
            },
          },
        },
      }}
    >
      <Text>20px text</Text>
    </MantineProvider>
  );
}

Classes on MantineProvider

Same as with styles you can add classes to all components with classNames. This approach is useful when you want to styles components with utility based CSS libraries.

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

function App() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        components: {
          Button: {
            classNames: { root: 'button-root', label: 'button-label' },
          },
        },
      }}
    >
      <Button>All Button components will have the classes above</Button>
    </MantineProvider>
  );
}

Variants on MantineProvider

To create new variants set variants property for any Mantine component. variants property must be an object of functions:

object key is variant name
function accepts three arguments: theme, params and context (object with variant and size keys)
function must return an object with component styles, you can use any selectors specified in component Styles API

For example you can create new variants for Button:

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

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            variants: {
              danger: (theme) => ({
                root: {
                  backgroundColor: theme.colors.red[9],
                  color: theme.colors.red[0],
                  ...theme.fn.hover({ backgroundColor: theme.colors.red[8] }),
                },
              }),

              success: (theme) => ({
                root: {
                  backgroundImage: theme.fn.linearGradient(
                    45,
                    theme.colors.cyan[theme.fn.primaryShade()],
                    theme.colors.teal[theme.fn.primaryShade()],
                    theme.colors.green[theme.fn.primaryShade()]
                  ),
                  color: theme.white,
                },
              }),
            },
          },
        },
      }}
    >
      <Group position="center">
        <Button variant="danger">Danger variant</Button>
        <Button variant="success">Success variant</Button>
      </Group>
    </MantineProvider>
  );
}

Sizes on MantineProvider

To create new sizes set sizes property for Mantine components that support size prop. sizes property must be an object of functions:

object key is size name
function accepts three arguments: theme, params and context (object with variant and size keys)
function must return an object with component styles, you can use any selectors specified in component Styles API

For example you can create new sizes for Button:

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

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            sizes: {
              xxxs: () => ({
                root: {
                  height: '1.25rem',
                  padding: '0.3125rem',
                  fontSize: '0.5rem',
                },
              }),

              xxl: (theme) => ({
                root: {
                  fontSize: '1.75rem',
                  height: '5rem',
                  padding: theme.spacing.xl,
                },
              }),
            },
          },
        },
      }}
    >
      <Group position="center">
        <Button size="xxxs">XXXS button</Button>
        <Button size="xxl">XXL button</Button>
      </Group>
    </MantineProvider>
  );
}

Go back

Theme object – Theming

Up next

Colors – Theming

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter