K

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
<MantineProvider
theme={{
colors: {
// Add your color
'deep-blue': ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
// or replace default theme color
blue: ['#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:

<MantineProvider
theme={{
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(); // HTMLButtonElement
const paperRef = useRef(); // -> HTMLDivElement
const inputRef = useRef(); // -> HTMLInputElement
return (
<>
<Button elementRef={buttonRef} />
<Paper elementRef={paperRef} />
<TextInput elementRef={inputRef} />
</>
);
}
Build fully functional accessible web applications with ease
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