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 of your application unless they are overridden by component props:

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

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

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button>Default button</Button>
        <Button color="red" variant="filled">
          Button with props
        </Button>
      </Group>
    </MantineProvider>
  );
}

Default props with MantineThemeProvider

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

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

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

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

      <AnotherAppPart />
    </>
  );
}

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 component name:

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

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          MenuItem: Menu.Item.extend({
            defaultProps: { color: 'red' },
          }),

          TabsList: Tabs.List.extend({
            defaultProps: {
              justify: 'center',
            },
          }),
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

useProps hook

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

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

Default color

Provider color

Prop color

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

interface CustomComponentProps {
  color?: string;
  children?: React.ReactNode;
}

const defaultProps: Partial<CustomComponentProps> = {
  color: 'red',
};

function CustomComponent(props: CustomComponentProps) {
  const { color, children } = useProps('CustomComponent', defaultProps, props);
  return <div style={{ color }}>{children}</div>;
}

const theme = createTheme({
  components: {
    CustomComponent: {
      defaultProps: {
        color: 'green',
      },
    },
  },
});

function Demo() {
  return (
    <div>
      <CustomComponent>Default color</CustomComponent>

      <MantineThemeProvider theme={theme}>
        <CustomComponent>Provider color</CustomComponent>
        <CustomComponent color="blue">Prop color</CustomComponent>
      </MantineThemeProvider>
    </div>
  );
}

Typography

CSS modules

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter