Version v7.11.0 | Mantine

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

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 prop to the name of the person, for example, name="John Doe" . If the name is set, you can use color="initials" to generate color based on the name:

New BubbleChart component:

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

LineChart component now supports gradient type which renders line chart with gradient fill:

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

RadarChart component now supports legend:

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 added only when the user presses Enter or clicks on a suggestion.

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

Recommended articles