Version v7.11.0 | Mantine (2025)

withProps function

All Mantine components now have withProps static function that can be used toadd default props to the component:

import { IMaskInput } from 'react-imask';import { Button, InputBase } from '@mantine/core';const LinkButton = Button.withProps({ component: 'a', target: '_blank', rel: 'noreferrer', variant: 'subtle',});const PhoneInput = InputBase.withProps({ mask: '+7 (000) 000-0000', component: IMaskInput, label: 'Your phone number', placeholder: 'Your phone number',});function Demo() { return ( <> {/* You can pass additional props to components created with `withProps` */} <LinkButton href="https://mantine.dev"> Mantine website </LinkButton> {/* Component props override default props defined in `withProps` */} <PhoneInput placeholder="Personal phone" /> </> );}

Avatar initials

Avatar component now supports displaying initials with auto generated color based on the given name value.To display initials instead of the default placeholder, set name propto the name of the person, for example, name="John Doe". If the nameis set, you can use color="initials" to generate color based on the name:

import { Avatar, Group } from '@mantine/core';const names = [ 'John Doe', 'Jane Mol', 'Alex Lump', 'Sarah Condor', 'Mike Johnson', 'Kate Kok', 'Tom Smith',];function Demo() { const avatars = names.map((name) => <Avatar key={name} name={name} color="initials" />); return <Group>{avatars}</Group>;}

BubbleChart component

New BubbleChart component:

import { BubbleChart } from '@mantine/charts';import { data } from './data';function Demo() { return ( <BubbleChart h={60} data={data} range={[16, 225]} label="Sales/hour" color="lime.6" dataKey={{ x: 'hour', y: 'index', z: 'value' }} /> );}

BarChart waterfall type

BarChart component now supports waterfall typewhich is useful for visualizing changes in values over time:

import { BarChart } from '@mantine/charts';import { data } from './data';function Demo() { return ( <BarChart h={300} data={data} dataKey="item" type="waterfall" series={[{ name: 'Effective tax rate in %', color: 'blue' }]} withLegend /> );}

LineChart gradient type

LineChart component now supports gradient typewhich renders line chart with gradient fill:

import { LineChart } from '@mantine/charts';import { data } from './data';function Demo() { return ( <LineChart h={300} data={data} series={[{ name: 'temperature', label: 'Avg. Temperature' }]} dataKey="date" type="gradient" gradientStops={[ { offset: 0, color: 'red.6' }, { offset: 20, color: 'orange.6' }, { offset: 40, color: 'yellow.5' }, { offset: 70, color: 'lime.5' }, { offset: 80, color: 'cyan.5' }, { offset: 100, color: 'blue.5' }, ]} strokeWidth={5} curveType="natural" yAxisProps={{ domain: [-25, 40] }} valueFormatter={(value) => `${value}°C`} /> );}

Right Y axis

LineChart, BarChart and AreaChart componentsnow support rightYAxis prop which renders additional Y axis on the right side of the chart:

import { LineChart } from '@mantine/charts';import { data } from './data';function Demo() { return ( <LineChart h={300} data={data} dataKey="name" withRightYAxis yAxisLabel="uv" rightYAxisLabel="pv" series={[ { name: 'uv', color: 'pink.6' }, { name: 'pv', color: 'cyan.6', yAxisId: 'right' }, ]} /> );}

RadarChart legend

RadarChart component now supports legend:

import { RadarChart } from '@mantine/charts';import { data } from './data';function Demo() { return ( <RadarChart h={300} data={data} dataKey="product" withPolarRadiusAxis withLegend series={[ { name: 'Sales January', color: 'blue.6', opacity: 0.2 }, { name: 'Sales February', color: 'orange.6', opacity: 0.2 }, ]} /> );}

TagsInput acceptValueOnBlur

TagsInput component behavior has been changed. Now By default,if the user types in a value and blurs the input, the value is added to the list.You can change this behavior by setting acceptValueOnBlur to false. In this case, the value is addedonly when the user presses Enter or clicks on a suggestion.

Value IS accepted on blur

Value IS NOT accepted on blur

import { TagsInput } from '@mantine/core';function Demo() { return ( <> <TagsInput label="Value IS accepted on blur" placeholder="Enter text, then blur the field" data={['React', 'Angular', 'Svelte']} acceptValueOnBlur /> <TagsInput label="Value IS NOT accepted on blur" placeholder="Enter text, then blur the field" data={['React', 'Angular', 'Svelte']} acceptValueOnBlur={false} mt="md" /> </> );}

Transition delay

Transition component now supports enterDelay and exitDelay props to delay transition start:

import { useState } from 'react';import { Button, Flex, Paper, Transition } from '@mantine/core';export function Demo() { const [opened, setOpened] = useState(false); return ( <Flex maw={200} pos="relative" justify="center" m="auto"> <Button onClick={() => setOpened(true)}>Open dropdown</Button> <Transition mounted={opened} transition="pop" enterDelay={500} exitDelay={300}> {(transitionStyle) => ( <Paper shadow="md" p="xl" h={120} pos="absolute" inset={0} bottom="auto" onClick={() => setOpened(false)} style={{ ...transitionStyle, zIndex: 1 }} > Click to close </Paper> )} </Transition> </Flex> );}

Documentation updates

New segmented progress example has been added to Progress component documentation
Select, TagsInput and MultiSelect components documentation now includes additional demo on how to change the dropdown width
New DatePicker example for excludeDate prop

Other changes

Pagination component now supports hideWithOnePage prop which hides pagination when there is only one page
Spoiler component now supports controlled expanded state with expanded and onExpandedChange props
Burger component now supports lineSize prop to change lines height
Calendar, DatePicker and other similar components now support highlightToday prop to highlight today's date

Version v7.12.0Version v7.10.0