You can now sponsor Mantine development with OpenCollective . All funds are used to improve Mantine and create new features and components.
New use-radial-move hook can be used to create custom radial sliders:
BarChart component now supports getBarColor prop to assign color based on value. getBarColor function is called with two arguments: value and series object. It should return a color string (theme color reference or any valid CSS color value).
ActionIcon.GroupSection and Button.GroupSection are new components that can be used in ActionIcon.Group / Button.Group to create sections that are not ActionIcon / Button components:
Table component now support variant="vertical" :
Table component now supports tabularNums prop to render numbers in tabular style. It sets font-variant-numeric: tabular-nums which makes numbers to have equal width. This is useful when you have columns with numbers and you want them to be aligned:
Modals manager now supports modals.updateModal and modals.updateContextModal function to update modal after it was opened:
use-form hook now supports form.submitting field and form.setSubmitting function to track form submission state.
form.submitting field will be set to true if function passed to form.onSubmit returns a promise. After the promise is resolved or rejected, form.submitting will be set to false :
You can also manually set form.submitting to true or false :
use-form hook now supports onSubmitPreventDefault option. This option is useful if you want to integrate useForm hook with server actions . By default, event.preventDefault() is called on the form onSubmit handler. If you want to change this behavior, you can pass onSubmitPreventDefault option to useForm hook. It can have the following values:
RichTextEditor component now supports subtle variant:
Modal and Drawer components now support onExitTransitionEnd and onEnterTransitionEnd props, which can be used to run code after exit/enter transition is finished. For example, this is useful when you want to clear data after modal is closed:
DatePicker and other components based on Calendar component now support withWeekNumbers prop to display week numbers:
Custom variants types augmentation guide was added to the documentation.
Example of adding custom variant type to Button component: