Examples of templates that you can submit:
- Next.js pages router + MDX + Mantine blog template
- Next.js app router + Mantine + styled-components template
- Vite + Mantine + Emotion template
New NumberFormatter component allows to format numbers with thousands separators, decimal separators, and custom number of decimal places. It supports the same formatting related props as NumberInput component.
@mantine/form package now exports
createFormActions function that
can be used to change form state from anywhere in your application.
The mechanism of form actions is similar to notifications system,
modals manager and other similar packages.
To use form actions, set
name property in use-form settings:
createFormActions function with the same form name as specified in
After that, you can use
demoFormActions to change form state from anywhere in your application.
For example, after a fetch request or after a user interaction with a component that does not have access
to the form state:
Table component now supports
data prop which can be used to generate table rows
from given data:
|Element position||Atomic mass||Symbol||Element name|
Table component now supports
stickyHeader prop, which can be used to make the table header
stick to the top of the table:
|Element position||Element name||Symbol||Atomic mass|
It is now possible to use Mantine with Sass. You can find documentation on this page. Note that it is still required to set up postcss-preset-mantine in order for all functions to work properly. Sass can be used as a replacement for CSS modules – it supports all features that CSS modules support.
You can find examples of Mantine + Sass usage in separate branches of templates:
Loader component now supports
children prop. The prop allows overriding the default
loader with any React node. It is useful in components that support
loaderProps (Button, LoadingOverlay, Dropzone, etc.)
loaderProps.children you can now display any React node instead of the loader.
All Mantine components now support
darkHidden props that can be used to hide
components in a specific color scheme:
dark-root mixins were added to postcss-preset-mantine.
These mixins can be used to add color scheme specific styles to the
Note that to use these mixins, you need to update
1.9.0 or higher.
- New Styles overview guide
- New Usage with Sass guide
- Storybook guide was updated to use new @storybook/addon-styling-webpack with separate instructions for Vite and other frameworks
- CSS modules guide now includes new section about global class names reference with
- Getting started guide now includes new section about setting up VS Code with PostCSS Language Support and CSS Variable Autocomplete extensions
- Popover documentation now includes a guide on how to use nested popovers
- AspectRatio documentation now includes a guide on how to use it in flexbox containers
- Additional AppShell.Section documentation was added
- 8 new Checkbox examples and demos were added
- Dropzone now supports
loaderPropsprop to pass props down to the Loader component
- theme.variantColorResolver now supports
hoverColorprop, which allows controlling
colorproperty when the component is hovered. New property is supported in Button and ActionIcon components.
- Flex is now a polymorphic component – it accepts
- Checkbox root element now has
data-checkedattribute when the checkbox is checked
- Checkbox and Radio components now support changing icon color with
- use-form now supports
onValuesChangeoption which can be used to sync form values with external state