New @mantine/charts package provides a set of components to build charts and graphs. All components are based on recharts . Currently, the package provides AreaChart , BarChart , LineChart and Sparkline components. More components will be added in the next minor releases.
New AreaChart component:
New LineChart component:
New BarChart component:
New Sparkline component:
You can now use OKLCH colors in theme.colors . OKLCH color model has 88.18% browser support , it is supported in all modern browsers. OKLCH model provides 30% more colors than HSL model and has several other advantages .
Example of adding OKLCH color to the theme:
New theme.autoContrast property controls whether text color should be changed based on the given color prop in the following components:
autoContrast can be set globally on the theme level or individually for each component via autoContrast prop, except for Spotlight and @mantine/dates components, which only support global theme setting.
autoContrast checks whether the given color luminosity is above or below the luminanceThreshold value and changes text color to either theme.white or theme.black accordingly:
alpha , lighten and darken functions now support CSS variables (with color-mix ) and OKLCH colors. All functions are available both in @mantine/core ( .ts / .js files) and postcss-preset-mantine ( .css files, requires version 1.12.0 or higher).
Will be transformed to:
Note that alpha function is a replacement for rgba . It was renamed to have a more clear meaning, as it can now be used with CSS variables and OKLCH colors. rgba function is still available as an alias for alpha function.
@mantine/form now supports enhanceGetInputProps . enhanceGetInputProps is a function that can be used to add additional props to the object returned by form.getInputProps . You can define it in useForm hook options. Its argument is an object with the following properties:
Example of using enhanceGetInputProps to disable input based on field path:
Example of using enhanceGetInputProps to add additional props to the input based on option passed to form.getInputProps :
Your personal information is stored securely. (Just kidding!)
@mantine/form now supports form.initialize handler.
When called form.initialize handler sets initialValues and values to the same value and marks form as initialized. It can be used only once, next form.initialize calls are ignored.
form.initialize is useful when you want to sync form values with backend API response:
Example with TanStack Query (react-query):
Note that form.initialize will erase all values that were set before it was called. It is usually a good idea to set readOnly or disabled on all form fields before form.initialize is called to prevent data loss. You can implement this with enhanceGetInputProps :
@mantine/form now supports validbot schema resolver :
Basic fields validation:
Nested fields validation
List fields validation:
ScrollArea now supports scrollbars prop, which allows controlling directions at which scrollbars should be rendered. Supported values are x , y and xy . If scrollbars="y" is set, only the vertical scrollbar will be rendered, and it will not be possible to scroll horizontally:
Charizard description from Bulbapedia
Charizard is a draconic, bipedal Pokémon. It is primarily orange with a cream underside from the chest to the tip of its tail. It has a long neck, small blue eyes, slightly raised nostrils, and two horn-like structures protruding from the back of its rectangular head. There are two fangs visible in the upper jaw when its mouth is closed. Two large wings with blue-green undersides sprout from its back, and a horn-like appendage juts out from the top of the third joint of each wing. A single wing-finger is visible through the center of each wing membrane. Charizard's arms are short and skinny compared to its robust belly, and each limb has three white claws. It has stocky legs with cream-colored soles on each of its plantigrade feet. The tip of its long, tapering tail burns with a sizable flame.
As Mega Charizard X, its body and legs are more physically fit, though its arms remain thin. Its skin turns black with a sky-blue underside and soles. Two spikes with blue tips curve upward from the front and back of each shoulder, while the tips of its horns sharpen, turn blue, and curve slightly upward. Its brow and claws are larger, and its eyes are now red. It has two small, fin-like spikes under each horn and two more down its lower neck. The finger disappears from the wing membrane, and the lower edges are divided into large, rounded points. The third joint of each wing-arm is adorned with a claw-like spike. Mega Charizard X breathes blue flames out the sides of its mouth, and the flame on its tail now burns blue. It is said that its new power turns it black and creates more intense flames.
Title component now supports lineClamp prop, which allows truncating text after a specified number of lines:
CSS variables for primary color are now available, you can use the following variables in your styles:
Help center is a new website with guides, tutorials and frequently asked questions. Currently, it has 14 questions, more FAQs will be added in the next releases.