Global styles on theme

You can now add global styles with theme.globalStyles, this way you will be able to share these styles between different environments (for example, Next.js application and Storybook):

import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
globalStyles: (theme) => ({
'*, *::before, *::after': {
boxSizing: 'border-box',
},
body: {
...theme.fn.fontStyles(),
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
lineHeight: theme.lineHeight,
},
'.your-class': {
backgroundColor: 'red',
},
'#your-id > [data-active]': {
backgroundColor: 'pink',
},
}),
}}
>
<App />
</MantineProvider>
);
}

Checkbox, Radio and Switch improvements

Checkbox, Radio and Switch components now support error, description and labelPosition props:

LabelPosition
Color
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { Checkbox } from '@mantine/core';
function Demo() {
return (
<Checkbox
label="I agree to sell my privacy"
/>
);
}

Inverted Slider

Slider and RangeSlider components now support inverted prop:

import { RangeSlider, Slider } from '@mantine/core';
function Demo() {
return (
<>
<Slider inverted defaultValue={80} py="xl" />
<RangeSlider inverted defaultValue={[40, 80]} py="xl" />
</>
);
}

Inline Tooltip and Popover

Tooltip and Popover components now can be used with inline elements:

Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this Pokémon was hunted close to extinction by those who were after the priceless antlers. When visiting a junkyard, you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s feathers glow in seven colors depending on the angle at which they are struck by light. These feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot of a rainbow.
import { Tooltip, Mark, Text } from '@mantine/core';
function Demo() {
return (
<Text>
Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
<Tooltip inline label="Inline tooltip">
<Mark>When visiting a junkyard</Mark>
</Tooltip>
, you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
feathers glow in seven colors depending on the angle at which they are struck by light. These
feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
of a rainbow.
</Text>
);
}
Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this Pokémon was hunted close to extinction by those who were after the priceless antlers. , you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s feathers glow in seven colors depending on the angle at which they are struck by light. These feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot of a rainbow.
import { Popover, Mark, Text } from '@mantine/core';
function Demo() {
return (
<Text>
Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this
Pokémon was hunted close to extinction by those who were after the priceless antlers.{' '}
<Popover middlewares={{ flip: true, shift: true, inline: true }} position="top">
<Popover.Target>
<Mark>When visiting a junkyard</Mark>
</Popover.Target>
<Popover.Dropdown>Inline dropdown</Popover.Dropdown>
</Popover>
, you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s
feathers glow in seven colors depending on the angle at which they are struck by light. These
feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot
of a rainbow.
</Text>
);
}

Autosize Modal

Modal component now supports size="auto":

import { useDisclosure, useCounter } from '@mantine/hooks';
import { Modal, Button, Group, Text, Badge } from '@mantine/core';
function Demo() {
const [opened, { close, open }] = useDisclosure(false);
const [count, { increment, decrement }] = useCounter(3, { min: 0 });
const badges = Array(count)
.fill(0)
.map((_, index) => <Badge key={index}>Badge {index}</Badge>);
return (
<>
<Modal opened={opened} onClose={close} size="auto" title="Modal size auto">
<Text>Modal with size auto will fits its content</Text>
<Group noWrap mt="md">
{badges}
</Group>
<Group mt="xl">
<Button variant="outline" onClick={increment}>
Add badge
</Button>
<Button variant="outline" onClick={decrement}>
Remove badge
</Button>
</Group>
</Modal>
<Group position="center">
<Button onClick={open}>Open modal</Button>
</Group>
</>
);
}

Indeterminate Checkbox

Checkbox indeterminate state now has separate styles for checked and unchecked states:

import { Checkbox } from '@mantine/core';
function Demo() {
return (
<>
<Checkbox checked={false} label="Default checkbox" />
<Checkbox checked={false} indeterminate label="Indeterminate checkbox" />
<Checkbox checked indeterminate label="Indeterminate checked checkbox" />
<Checkbox checked label="Checked checkbox" />
<Checkbox disabled label="Disabled checkbox" />
<Checkbox disabled checked label="Disabled checked checkbox" />
<Checkbox disabled indeterminate label="Disabled indeterminate checkbox" />
</>
);
}

form.setValues partial

form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

import { useForm } from '@mantine/form';
const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
form.setValues({ name: 'John', age: 21 });
form.values; // -> { name: 'John', email: '', age: 21 }

Documentation updates

Other changes

  • Table component now supports withBorder and withColumnBorders props
  • NumberInput component now supports removeTrailingZeros prop
  • Popover and Menu components now support disabled prop
  • nprogress now supports new completeNavigationProgress handler