Version 5.10.0

Release date

Theme based default props

Default props on MantineProvider can now subscribe to theme:

import { MantineProvider, Button } from '@mantine/core';
function Demo() {
return (
components: {
Button: {
defaultProps: (theme) => ({
color: theme.colorScheme === 'dark' ? 'orange' : 'cyan',
<Button>Demo button</Button>

@mantine/form validators

@mantine/form package now exports isNotEmpty, isEmail, matches, isInRange and hasLength functions to simplify validation of common fields types:

import { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } from '@mantine/form';
import { Button, Group, TextInput, NumberInput, Box } from '@mantine/core';
function Demo() {
const form = useForm({
initialValues: {
name: '',
job: '',
email: '',
favoriteColor: '',
age: 18,
validate: {
name: hasLength({ min: 2, max: 10 }, 'Name must be 2-10 characters long'),
job: isNotEmpty('Enter your current job'),
email: isEmail('Invalid email'),
favoriteColor: matches(/^#([0-9a-f]{3}){1,2}$/, 'Enter a valid hex color'),
age: isInRange({ min: 18, max: 99 }, 'You must be 18-99 years old to register'),
return (
<Box component="form" maw={400} mx="auto" onSubmit={form.onSubmit(() => {})}>
<TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} />
label="Your job"
placeholder="Your job"
label="Your email"
placeholder="Your email"
label="Your favorite color"
placeholder="Your favorite color"
label="Your age"
placeholder="Your age"
<Group position="right" mt="md">
<Button type="submit">Submit</Button>

Flagpack extension

New mantine-flagpack extension. It is a set of 4x3 flags as React components based on flagpack. The package is tree shakable – all unused components are not included in the production bundle. All flag components support style props.

Other changes

  • ColorPicker component now supports onColorSwatchClick prop
  • ColorInput now supports closeOnColorSwatchClick prop
  • ColorInput now shows eye dropper in all supported browsers by default
  • @mantine/form now exports TransformedValues type to get type of transformed values from the form object
  • RingProgress now supports changing root segment color with rootColor prop
  • Text component now supports truncate prop
  • Stepper component now supports allowSelectNextSteps prop
  • @mantine/form now exports superstructResolver to allow schema based validation with superstruct
  • FileInput and FileButton components now support capture prop