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-height 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: 'Monaco, Courier, monospace',
      headings: { fontFamily: 'Greycliff CF, sans-serif' },
    }}>
      <Title order={3}>Greycliff CF or sans-serif title</Title>
      <Button>Verdana button</Button>
      <Code>Monaco, 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 } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{
      colors: {
        'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
        'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
      },
    }}>
      <Button color="ocean-blue">Ocean blue button</Button>
      <Badge color="bright-pink" variant="filled">Bright pink badge</Badge>
    </MantineProvider>
  );
}

Primary color

The default primary color is 'blue', which means it is referencing theme.colors.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={{
      colors: {
        brand: ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82','#AD1374' ],
      },
      primaryColor: 'brand',
      colorScheme
    }}
    >
      <Button>Primary button</Button>
      <Button color="blue">Blue 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 in Grid, SimpleGrid and other components.

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:

Add your own properties to theme

You can add any amount of properties using other:

// Add any other properties on theme
<MantineProvider
  theme={{
    other: {
      fontFamilySecondary: 'Arial',
      lineHeights: [1.2, 1.4, 1.6, 1.8, 1.95],
      reduceMotion: true,
    },
  }}
>
  <App />
</MantineProvider>

// Then use your custom properties
<Box sx={(theme) => ({
  fontFamily: theme.other.fontFamilySecondary,
  lineHeight: theme.other.lineHeight[2],
  transitionDuration: theme.other.reduceMotion ? '0ms' : '200ms',
})} />