MantineProvider

MantineProvider component allows you to change theme globally. It is not required if you decide to use default theme:

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

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

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

// Default theme is used in all components in App
function NoProvider() {
  return <App />;
}

use-mantine-theme hook

Hook returns theme from MantineProvider context or default theme if you did not wrap application with MantineProvider.

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

function Component() {
  const theme = useMantineTheme();
  return <div style={{ background: theme.colors.blue[5] }} />;
}

Theme object

Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design elements are defined.

Theme shape:

interface MantineTheme {
  dir: 'ltr' | 'rtl';
  loader: 'oval' | 'bars' | 'dots';
  dateFormat: string;
  colorScheme: 'light' | 'dark';
  white: string;
  black: string;
  colors: Record<string, Tuple<string, 10>>;
  fontFamily: CSSProperties['fontFamily'];
  lineHeight: CSSProperties['lineHeight'];
  transitionTimingFunction: CSSProperties['transitionTimingFunction'];
  fontFamilyMonospace: CSSProperties['fontFamily'];
  primaryColor: string;

  fontSizes: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
  radius: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
  spacing: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
  breakpoints: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
  shadows: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>;

  headings: {
    fontFamily: CSSProperties['fontFamily'];
    fontWeight: CSSProperties['fontWeight'];
    sizes: {
      h1: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h2: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h3: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h4: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h5: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
      h6: { fontSize: CSSProperties['fontSize']; lineHeight: CSSProperties['lineHeight'] };
    };
  };

  // theme functions, see in separate guide
  fn: MantineThemeFunctions;

  // Add your own custom properties on Mantine theme
  other: Record<string, any>;

  // Set a default locale for every date related component
  datesLocale: string;
}

Pass theme object to MantineProvider to change global styles:

// Theme is deeply merged with default theme
<MantineProvider
  theme={{
    colorScheme: 'light',
    colors: {
      // Add your color
      'deep-blue': ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
      // or replace default theme color
      blue: ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
    },

    shadows: {
      // other shadows (xs, sm, lg) will be merged from default theme
      md: '1px 1px 3px rgba(0,0,0,.25)',
      xl: '5px 5px 3px rgba(0,0,0,.25)',
    },

    headings: {
      fontFamily: 'Roboto, sans-serif',
      sizes: {
        h1: { fontSize: 30 },
      },
    },
  }}
>
  <YourApp />
</MantineProvider>

If some parts of your application require different theme styles you can wrap them in another MantineProvider. Nested MantineProvider components do not inherit theme properties from parents and merge theme prop with default theme.

Georgia or serif text

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

function Demo() {
  return (
    <MantineProvider theme={{ fontFamily: 'Georgia, serif' }}>
      <Text style={{ textAlign: 'center', marginBottom: 10 }}>Georgia or serif text</Text>

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

Styles on MantineProvider

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

Dot badge

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

function Demo() {
  return (
    <MantineProvider
      styles={{
        Button: (theme) => ({
          // Shared button styles are applied to all buttons
          root: { height: 42, padding: '0 30px' },

          // These styles are applied only to buttons with outline variant
          outline: {
            // You can use any selectors inside (the same way as in createStyles function)
            '&:hover': {
              backgroundColor:
                theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
            },
          },
        }),

        // Use raw styles object if you do not need theme dependency
        Badge: {
          dot: {
            borderWidth: 2,
          },
        },
      }}
    >
      <Button variant="outline">Outline button</Button>
      <Button variant="filled">Filled button</Button>
      <Badge variant="dot">Dot badge</Badge>
    </MantineProvider>
  );
}

Normalize.css and global styles

MantineProvider includes normalize.css and some extra global 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.fontSize.md

To enable these global styles set withNormalizeCSS and withGlobalStyles props:

<MantineProvider withNormalizeCSS withGlobalStyles>
  <App />
</MantineProvider>

Configure emotion

You can configure emotion cache options in MantineProvider. These options are usually used to configure styles insertion point. By default Mantine components styles and styles created with createStyles function are prepended to head. To change that behavior set prepend option to false:

<MantineProvider emotionOptions={{ key: 'mantine', prepend: false }}>
  <App />
</MantineProvider>

Emotion cache also allows you to use Stylis plugins. For example, you can use stylis-plugin-rtl to add rtl support:

import { MantineProvider } from '@mantine/core';
import rtlPlugin from 'stylis-plugin-rtl';

function Demo() {
  return (
    <MantineProvider emotionOptions={{ key: 'mantine', stylisPlugins: [rtlPlugin] }}>
      <App />
    </MantineProvider>
  );
}