Extend theme

Typography

By default Mantine uses system fonts. It brings fast and familiar experience to users. You can change fonts and other text styles for headings, code and all other components:

• theme.fontFamilyMonospace – controls components with monospace font-family, for example, Code and Kbd
• theme.fontFamily – controls font-family in all other cases
• theme.lineHeight – controls line-height property in all components except headings
• theme.fontSizes – controls font-size in all components except headings
• theme.headings – controls font-family, line-heigh and font-size of h1-h6 tags in Title and TypographyStylesProvider components

import { Button, Code, Title, MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{
      fontFamily: 'Verdana, sans-serif',
      fontFamilyMonospace: 'Courier, monospace',
      headings: { fontFamily: 'Georgia, serif' },
    }}>
      <Title order={3}>Georgia or serif title</Title>
      <Button>Verdana button</Button>
      <Code>Courier Code</Code>
    </MantineProvider>
  );
}

Default colors

Mantine uses open-color in default theme with some additions. Each color has 10 shades.

Colors are exposed on theme object as an array of strings, you can access color shade by color name and index (0-9), colors with larger index are darker:

theme.colors.red[5];
theme.colors.gray[9];
theme.colors.blue[0];

Extend or replace colors

You can add any amount of extra colors by extending theme.colors with MantineProvider. This will allow you to use these colors with all components which support color change, for example, Button, Badge or Switch.

Note that all colors that are added should always include 10 shades. You can use some of these tools to generate or copy ready color palettes:

• Themera
• Material Design Colors
• Omatsuri
• Smart Swatch
• Palx

import { Badge, Button, MantineProvider, Switch } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{
      colors: {
        'deep-blue': ['#E9EDFC', '#C1CCF6', '#99ABF0', '#7189EA', '#4968E4', '#2147DE', '#1A39B2', '#142B85', '#0D1D59', '#070E2C'],
        asphalt: ['#F0F4F5', '#D4E0E2', '#B9CCD0', '#9EB8BD', '#82A4AB', '#679098', '#52747A', '#3E575B', '#293A3D', '#151D1E']
      },
    }}>
      <Button color="deep-blue">Deep blue button</Button>

      <Badge color="asphalt" variant="filled">
        Asphalt badge
      </Badge>

      <Switch
        color="deep-blue"
        label="Deep blue switch"
        defaultChecked
      />
    </MantineProvider>
  );
}

Primary color

Default primary color is blue, you can change it to any color defined in theme.colors. Primary color is used:

• in some components to determine color value if component didn't receive color prop;
• to define focus styles for all interactive elements.

For example, Button Component by default will use theme.primaryColor (press any key on keyboard to see focus ring):

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

function Demo() {
  return (
    <MantineProvider theme={{ primaryColor: 'teal' }}>
      <Button>Primary button</Button>
      <Button color="red">Red button</Button>
    </MantineProvider>
  );
}

Spacing, radius and shadows

Mantine supports 5 sizes for spacing, radius and shadows: xs, sm, md, lg, xl. These values are exposed on theme:

• theme.spacing – general spacing values used for paddings and margins, for example, to set padding on Paper or Container components or to calculate margins in TypographyStylesProvider component.
• theme.shadows – box-shadow values – used with components which extend Paper: Modal, Menu and others
• theme.radius – border-radius values – used in all components which support radius: Paper, Button, Input and others

Example with Paper component (padding is set with theme.spacing):

<Paper padding="md" shadow="xs">
  <Text>Paper is the most basic ui component</Text>
  <Text>
    Use it to create cards, dropdowns, modals and other components that require background
    with shadow
  </Text>
</Paper>

You can change size values by setting corresponding properties. In this example:

• xs and xl values from theme will be overwritten
• sm, md and lg values will be used from default theme

import { Button, Code, MantineProvider, Title } from '@mantine/core';

function YourApp() {
  return (
    <MantineProvider
      theme={{
        spacing: {
          xs: 2,
          xl: 20,
        },
      }}
    >
      <Title order={3}>Georgia or serif title</Title>
      <Button>Verdana button</Button>
      <Code>Courier Code</Code>
    </MantineProvider>
  );
}

Breakpoints

Mantine supports 5 sizes for breakpoints (xs, sm, md, lg, xl), which are used for example in the Grid component.

You can change the breakpoints by setting corresponding properties. In this example:

• sm and lg values from theme will be overwritten
• xs, md and xl values will be used from default theme

import { MantineProvider } from '@mantine/core';

function YourApp() {
  return (
    <MantineProvider
      theme={{
        breakpoints: {
          sm: 800,
          lg: 1275,
        },
      }}
    >
      Hello World
    </MantineProvider>
  );
}

Mantine uses Bootstrap's breakpoint values as defaults: