import { ThemingDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.DefaultProps);

Default props

You can define default props for every Mantine component by setting theme.components. These props will be used by default by all components in your application unless they are overridden by component props:

Default props with MantineThemeProvider

You can also use MantineThemeProvider to define default props for a part of your application:

tsx

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

const theme = createTheme({
  components: {
    Button: Button.extend({
      defaultProps: {
        color: 'cyan',
        variant: 'outline',
      },
    }),
  },
});

function Demo() {
  return (
    <>
      <MantineThemeProvider theme={theme}>
      </MantineThemeProvider>
    </>
  );
}

Default props for compound components

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

tsx

import {
  createTheme,
  MantineProvider,
  Menu,
  Tabs,
} from '@mantine/core';

const theme = createTheme({
  components: {
    MenuItem: Menu.Item.extend({
      defaultProps: { color: 'red' },
    }),

    TabsList: Tabs.List.extend({
      defaultProps: {
        justify: 'center',
      },
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
    </MantineProvider>
  );
}

useProps hook

You can use the useProps hook to add default props support to any custom component. useProps accepts three arguments:

component name (string) – it is used to connect the component with the theme
defaultProps – default props on the component level – these props are used when default props are not defined on the theme
props – props passed to the component

withProps function

All Mantine components have a withProps static function that can be used to add default props to the component:

tsx

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

const LinkButton = Button.withProps({
  component: 'a',
  target: '_blank',
  rel: 'noreferrer',
  variant: 'subtle',
});

const PhoneInput = TextInput.withProps({
  label: 'Your phone number',
  placeholder: 'Your phone number',
});

function Demo() {
  return (
    <>
      <LinkButton href="https://mantine.dev">
        Mantine website
      </LinkButton>
      <PhoneInput placeholder="Personal phone" />
    </>
  );
}