Style props

All Mantine components now support the following style props:

PropCSS PropertyTheme key
m
margin
theme.spacing
mt
marginTop
theme.spacing
mb
marginBottom
theme.spacing
ml
marginLeft
theme.spacing
mr
marginRight
theme.spacing
mx
marginRight
,
marginLeft
theme.spacing
my
marginTop
,
marginBottom
theme.spacing
p
padding
theme.spacing
pt
paddingTop
theme.spacing
pb
paddingBottom
theme.spacing
pl
paddingLeft
theme.spacing
pr
paddingRight
theme.spacing
px
paddingRight
,
paddingLeft
theme.spacing
py
paddingTop
,
paddingBottom
theme.spacing
bg
background
theme.colors
c
color
theme.colors
opacity
opacity
ff
fontFamily
fz
fontSize
theme.fontSize
fw
fontWeight
lts
letterSpacing
ta
textAlign
lh
lineHeight
fs
fontStyle
tt
textTransform
td
textDecoration
w
width
miw
minWidth
maw
maxWidth
h
height
mih
minHeight
mah
maxHeight
bgsz
background-size
bgp
background-position
bgr
background-repeat
bga
background-attachment
pos
position
top
top
left
left
bottom
bottom
right
right
inset
inset
display
display

Style props support responsive styles:

Box with responsive style props
import { Box } from '@mantine/core';
function Demo() {
return (
<Box
w={{ base: 200, sm: 400, lg: 500 }}
py={{ base: 'xs', sm: 'md', lg: 'xl' }}
bg="blue.7"
c="#fff"
ta="center"
mx="auto"
>
Box with responsive style props
</Box>
);
}

Flex component

Flex component is an alternative to Group and Stack components. It supports new responsive style props:

import { Flex, Button } from '@mantine/core';
function Demo() {
return (
<Flex
direction={{ base: 'column', sm: 'row' }}
gap={{ base: 'sm', sm: 'lg' }}
justify={{ sm: 'center' }}
>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</Flex>
);
}

Focus ring styles on theme

You can now customize focus ring styles for all components in MantineProvider:

function Demo() {
return (
<MantineProvider
inherit
theme={{
focusRingStyles: {
// reset styles are applied to <button /> and <a /> elements
// in &:focus:not(:focus-visible) selector to mimic
// default browser behavior for native <button /> and <a /> elements
resetStyles: () => ({ outline: 'none' }),
// styles applied to all elements expect inputs based on Input component
// styled are added with &:focus selector
styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
// focus styles applied to components that are based on Input
// styled are added with &:focus selector
inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
},
}}
>
<Group grow>
<Button>Move focus with tab</Button>
<TextInput placeholder="Focus input to see styles override" />
</Group>
</MantineProvider>
);
}

Responsive Header and Footer height

Header and Footer components now support responsive height:

import { Header } from '@mantine/core';
function Demo() {
return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
}

Other changes

  • Collapse component now supports axis prop, it is now possible to animate width
  • Button component now supports loaderPosition="center"
  • Carousel now supports onSlideChange prop
  • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
  • use-form onSubmit can now be called without form event
  • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling