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

Greycliff CF or sans-serif title

Monaco, Courier Code
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];

dark

dark 0
#C1C2C5
dark 1
#A6A7AB
dark 2
#909296
dark 3
#5c5f66
dark 4
#373A40
dark 5
#2C2E33
dark 6
#25262b
dark 7
#1A1B1E
dark 8
#141517
dark 9
#101113

gray

gray 0
#f8f9fa
gray 1
#f1f3f5
gray 2
#e9ecef
gray 3
#dee2e6
gray 4
#ced4da
gray 5
#adb5bd
gray 6
#868e96
gray 7
#495057
gray 8
#343a40
gray 9
#212529

red

red 0
#fff5f5
red 1
#ffe3e3
red 2
#ffc9c9
red 3
#ffa8a8
red 4
#ff8787
red 5
#ff6b6b
red 6
#fa5252
red 7
#f03e3e
red 8
#e03131
red 9
#c92a2a

pink

pink 0
#fff0f6
pink 1
#ffdeeb
pink 2
#fcc2d7
pink 3
#faa2c1
pink 4
#f783ac
pink 5
#f06595
pink 6
#e64980
pink 7
#d6336c
pink 8
#c2255c
pink 9
#a61e4d

grape

grape 0
#f8f0fc
grape 1
#f3d9fa
grape 2
#eebefa
grape 3
#e599f7
grape 4
#da77f2
grape 5
#cc5de8
grape 6
#be4bdb
grape 7
#ae3ec9
grape 8
#9c36b5
grape 9
#862e9c

violet

violet 0
#f3f0ff
violet 1
#e5dbff
violet 2
#d0bfff
violet 3
#b197fc
violet 4
#9775fa
violet 5
#845ef7
violet 6
#7950f2
violet 7
#7048e8
violet 8
#6741d9
violet 9
#5f3dc4

indigo

indigo 0
#edf2ff
indigo 1
#dbe4ff
indigo 2
#bac8ff
indigo 3
#91a7ff
indigo 4
#748ffc
indigo 5
#5c7cfa
indigo 6
#4c6ef5
indigo 7
#4263eb
indigo 8
#3b5bdb
indigo 9
#364fc7

blue

blue 0
#e7f5ff
blue 1
#d0ebff
blue 2
#a5d8ff
blue 3
#74c0fc
blue 4
#4dabf7
blue 5
#339af0
blue 6
#228be6
blue 7
#1c7ed6
blue 8
#1971c2
blue 9
#1864ab

cyan

cyan 0
#e3fafc
cyan 1
#c5f6fa
cyan 2
#99e9f2
cyan 3
#66d9e8
cyan 4
#3bc9db
cyan 5
#22b8cf
cyan 6
#15aabf
cyan 7
#1098ad
cyan 8
#0c8599
cyan 9
#0b7285

teal

teal 0
#e6fcf5
teal 1
#c3fae8
teal 2
#96f2d7
teal 3
#63e6be
teal 4
#38d9a9
teal 5
#20c997
teal 6
#12b886
teal 7
#0ca678
teal 8
#099268
teal 9
#087f5b

green

green 0
#ebfbee
green 1
#d3f9d8
green 2
#b2f2bb
green 3
#8ce99a
green 4
#69db7c
green 5
#51cf66
green 6
#40c057
green 7
#37b24d
green 8
#2f9e44
green 9
#2b8a3e

lime

lime 0
#f4fce3
lime 1
#e9fac8
lime 2
#d8f5a2
lime 3
#c0eb75
lime 4
#a9e34b
lime 5
#94d82d
lime 6
#82c91e
lime 7
#74b816
lime 8
#66a80f
lime 9
#5c940d

yellow

yellow 0
#fff9db
yellow 1
#fff3bf
yellow 2
#ffec99
yellow 3
#ffe066
yellow 4
#ffd43b
yellow 5
#fcc419
yellow 6
#fab005
yellow 7
#f59f00
yellow 8
#f08c00
yellow 9
#e67700

orange

orange 0
#fff4e6
orange 1
#ffe8cc
orange 2
#ffd8a8
orange 3
#ffc078
orange 4
#ffa94d
orange 5
#ff922b
orange 6
#fd7e14
orange 7
#f76707
orange 8
#e8590c
orange 9
#d9480f

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:

Bright pink badge
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

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: 'cyan' }}>
<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 is the most basic ui component
Use it to create cards, dropdowns, modals and other components that require background with shadow
Padding
Shadow
Radius
<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:

BreakpointViewport width
xs576px
sm768px
md992px
lg1200px
xl1400px
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback