Version v7.2.0 | Mantine

You are welcome to share your GitHub templates with the community. Community templates are featured on the getting started page. You can find a guide on how to create and submit a template here .

Examples of templates that you can submit:

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:

Then call createFormActions function with the same form name as specified in useForm settings:

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:

Table component now supports stickyHeader prop, which can be used to make the table header stick to the top of the table:

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.) – with loaderProps.children you can now display any React node instead of the loader.

All Mantine components now support lightHidden and darkHidden props that can be used to hide components in a specific color scheme:

New light-root and dark-root mixins were added to postcss-preset-mantine . These mixins can be used to add color scheme specific styles to the :root / html element. Note that to use these mixins, you need to update postcss-preset-mantine to 1.9.0 or higher.

Recommended articles