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 {
loader: 'oval' | 'bars' | 'dots';
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'] };
};
};
}

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>

Nested MantineProviders

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>
);
}
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback