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 } 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>
  );
}
Go back
Typography – Theming
Up next
Theme functions – Theming
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter