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>
);
}

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>
);
}