Version 3.5.0

Release date

@mantine/prism changes

Prism component now uses ScrollArea instead of native browser scrollbars:

With ScrollArea component (default):
Long code that will force Prism to have a horizontal scrollbar, by default, scroll behavior is handled by ScrollArea component, but it can be changed to native browser scrollbars
With native scrollbars:
Long code that will force Prism to have a horizontal scrollbar, by default, scroll behavior is handled by ScrollArea component, but it can be changed to native browser scrollbars

Prism now supports organizing code with tabs:

@font-face {
font-family: Chunkfive; src: url('Chunkfive.otf');
body, .usertext {
color: #F0F0F0; background: #600;
font-family: Chunkfive, sans;
--heading-1: 30px/32px Helvetica, sans-serif;
@import url(print.css);
@media print {
a[href^=http]::after {
content: attr(href)

NumberInput component improvements

NumberInput component now supports the following new features:

  • decimal separator configuration
  • value increment/decrement when user clicks and holds up/down controls
label="Number input with a custom decimal separator"
Step the value when clicking and holding the arrows
Ste value will increase incrementally when control is hold
style={{ marginTop: 15 }}
label="Step on hold"
description="Step the value when clicking and holding the arrows"
label="Step the value with interval function"
description="Step value will increase incrementally when control is hold"
stepHoldInterval={(t) => Math.max(1000 / t ** 2, 25)}

New features

RingProgress component now supports round caps:

{ value: 40, color: 'cyan' },
{ value: 15, color: 'orange' },
{ value: 15, color: 'grape' },

Stepper component now supports Stepper.Completed to display content after final step is completed:

Step 2 content: Verify email
import { Stepper, Button, Group } from '@mantine/core';
function Demo() {
const [active, setActive] = useState(1);
const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
return (
<Stepper active={active} onStepClick={setActive} breakpoint="sm">
<Stepper.Step label="Fist step" description="Create an account">
Step 1 content: Create an account
<Stepper.Step label="Second step" description="Verify email">
Step 2 content: Verify email
<Stepper.Step label="Final step" description="Get full access">
Step 3 content: Get full access
Completed, click back button to get to previous step
<Group position="center" mt="xl">
<Button variant="default" onClick={prevStep}>Back</Button>
<Button onClick={nextStep}>Next step</Button>

Progress component now supports labels and animations:

<Progress value={75} animate />

Switch component now supports inner labels:

<Switch onLabel="ON" offLabel="OFF" />

RichTextEditor now supports mentions:

TransferList now supports items grouping:


Other changes

  • New use-element-size hook – subscribe to element width and height with ResizeObserver, simpler alternative to use-resize-observer
  • Select component now has an option to enable active item deselection when user clicks on active item
  • Skeleton component now supports animations disabling
  • Alert, Tooltip and Notification components now support radius prop
  • Alert component now supports 3 variants: filled, light and outline
  • Center component is now polymorphic, it supports component prop
  • Grid component now exposes Col component as Grid.Col
  • Progress and RingProgress components now support setting colors with css color values instead of allowing only values from theme.colors
  • Modal component now has an option to disable closing when escape key is pressed with closeOnEscape={false}
  • @mantine/core package now exports MantineProviderProps type
  • @mantine/hooks package now exports UseForm type

3.4.0 - 3.5.0 bug fixes

  • Fix incorrect click outside events handling in Modal and Drawer components
  • Fix incorrect max-width calculated for Group with falsy children
  • Fix incorrect animations applied to Collapse component with animateOpacity prop set to false
  • Fix HueSlider and AlphaSlider components breaking when used without size prop
  • Fix size prop not applied to Divider with label
  • Fix onChange function called with incorrect precision in NumberInput component
  • Fix Linux detected as undetermined is use-os hook
  • Fix incorrect MediaQuery component largerThan and smallerThan props handling (breaking bug fix)
  • Fix incorrect DateRangePicker types for strict TypeScript mode
  • Fix unexpected vertical scrollbars in TransferList component
  • Fix unexpected onChange function called onBlur in DatePicker component
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback