Default props

You can define default props for every Mantine component by setting theme.components on MantineProvider:

import { MantineProvider, Group, Button, Switch } from '@mantine/core';
function Demo() {
return (
<>
<MantineProvider
theme={{
components: {
Button: {
defaultProps: {
size: 'xs',
color: 'cyan',
},
},
Switch: {
defaultProps: {
size: 'xs',
onLabel: 'ON',
offLabel: 'OFF',
},
},
},
}}
>
<Group position="center">
<Button>Within provider</Button>
<Switch label="Within provider" />
</Group>
</MantineProvider>
<Group position="center" mt="md">
<Button>Outside of provider</Button>
<Switch label="Outside of provider" />
</Group>
</>
);
}

Overriding default props

Default props defined on MantineProvider will be overridden with props that you set on component itself:

import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
components: {
Button: {
defaultProps: { color: 'red' },
},
},
}}
>
<Button>Red color, defined with defaultProps</Button>
<Button color="cyan">Cyan color, overridden by prop</Button>
</MantineProvider>
);
}

Default props based on theme

import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
<MantineProvider
inherit
theme={{
components: {
Button: {
defaultProps: (theme) => ({
color: theme.colorScheme === 'dark' ? 'orange' : 'cyan',
}),
},
},
}}
>
<Button>Demo button</Button>
</MantineProvider>
);
}

Default props for static components

Some components like Menu, Tabs and RichTextEditor have associated static components: Menu.Item, Tabs.List, RichTextEditor.Toolbar. You can add default props to these components by omitting the dot from component name:

import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
components: {
MenuItem: {
defaultProps: { color: 'red' },
},
TabsList: {
defaultProps: {
position: 'right',
},
},
RichTextEditorToolbar: {
defaultProps: {
sticky: true,
stickyOffset: 60,
},
},
},
}}
>
<App />
</MantineProvider>
);
}

Usage with TypeScript

MantineProvider uses Record<string, any> type for default props types to improve TypeScript performance. If you need more strict type checks or want to have IDE autocomplete, you should define default props separately:

import { MantineProvider, ButtonProps, SwitchProps } from '@mantine/core';
const ButtonDefaultProps: Partial<ButtonProps> = {
size: 'xs',
color: 'cyan',
};
const SwitchDefaultProps: Partial<SwitchProps> = {
size: 'xs',
onLabel: 'ON',
offLabel: 'OFF',
};
function Demo() {
return (
<MantineProvider
theme={{
components: {
Button: { defaultProps: ButtonDefaultProps },
Switch: { defaultProps: SwitchDefaultProps },
},
}}
>
<App />
</MantineProvider>
);
}