Shared props
Mantine components follow the same props API for colors, spacing, padding, sizes, radius and shadows. This guide will help you understand how to change these properties.
Colors
Mantine components work with colors defined in theme.colors.
theme.colors is an object that contains an array of 10 shades per each color. To use predefined colors in components set color prop:
<Badge color="teal" /><Button color="violet" />
To add your own colors use MantineProvider:
// Theme is deeply merged with default theme<MantineProvidertheme={{colors: {// Add your color'deep-blue': ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],// or replace default theme colorblue: ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],},}}><YourApp /></MantineProvider>
Note that component appearance usually depends on variant prop and current theme.colorScheme.
Sizes
Most Mantine components support size prop with xs, sm, md, lg and xl values:
<Button size="xl" /><Badge size="xs" />
size prop controls various css properties across all supported components,
in some components where size is associated with only one value, you can set it in px:
<Slider size="xs" /> // Predefined xs size<Slider size={20} /> // -> 20px track height, other parts are scaled from this value
Spacing and padding
Components that have padding get values from theme.spacing, default values are:
{ xs: 10, sm: 12, md: 16, lg: 20, xl: 24 }
To change these values set spacing property on theme:
<MantineProvider theme={{ spacing: { xs: 15, sm: 20, md: 25, lg: 30, xl: 40 } }}><YourApp /></MantineProvider>
Later when you use Mantine components you can reference these values in spacing or padding props or set spacing in px:
<Paper padding="xl" /> // -> xl padding from theme.spacing<Paper padding={30} /> // -> 30px padding<Group spacing="md" /> // -> md spacing from theme.spacing<Group spacing={40} /> // 40px spacing
Shadows
Components that use box-shadow property get values from theme.shadows, default values are:
{xs: '0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)',sm: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 10px 15px -5px, rgba(0, 0, 0, 0.04) 0px 7px 7px -5px',md: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px',lg: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 28px 23px -7px, rgba(0, 0, 0, 0.04) 0px 12px 12px -7px',xl: '0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 36px 28px -7px, rgba(0, 0, 0, 0.04) 0px 17px 17px -7px',}
To change these values set shadows property on theme:
<MantineProvidertheme={{shadows: {xs: '1px 1px 1px rgba(0, 0, 0, 0.3)',sm: '1px 1px 4px rgba(0, 0, 0, 0.4)',md: '3px 3px 4px rgba(0, 0, 0, 0.4)',lg: '3px 3px 4px 5px rgba(0, 0, 0, 0.4)',xl: '3px 3px 4px 15px rgba(0, 0, 0, 0.4)',},}}><YourApp /></MantineProvider>
Later when you use Mantine components you can reference these values in shadow prop or define your own shadow:
<Paper shadow="xl" /> // -> xl shadow from theme.shadows<Paper shadow="1px 3px 4px rgba(0, 0, 0, 0.4)" /> // -> your own shadow not related to theme.shadows
Radius
Components that use border-radius property get values from theme.radius, default values are:
{ xs: 2, sm: 4, md: 8, lg: 16, xl: 32 }
To change these values set radius property on theme:
<MantineProvider theme={{ radius: { xs: 3, sm: 6, md: 9, lg: 12, xl: 15 } }}><YourApp /></MantineProvider>
Radius is always is set in px and in addition to predefined values you can set it in px:
<Button radius="md" /> // -> md radius from theme.radius<Button radius={20} /> // -> 20px border-radius
Getting element ref
You can get ref of most components with elementRef prop:
import { useRef } from 'react';import { Button, Paper, TextInput } from '@mantine/core';function Demo() {const buttonRef = useRef(); // HTMLButtonElementconst paperRef = useRef(); // -> HTMLDivElementconst inputRef = useRef(); // -> HTMLInputElementreturn (<><Button elementRef={buttonRef} /><Paper elementRef={paperRef} /><TextInput elementRef={inputRef} /></>);}