mantine

• Fix incorrect hidden elements handling in use-focus-trap hook (#1616)
• Add option to configure dropdown position in DatePicker component (#1638)
• Add quill specific styles to TypographyStylesProvider
• Fix Styles API value label and input label collision in MultiSelect component
• Fix iconWidth not applying actual width to the icon element in all inputs
• Fix incorrect aria-activedescendant attribute in Select and Autocomplete components on initial render

• Add option to customize weekend days with weekendDays prop in all @mantine/dates components that use Month component as a base (DatePicker, Calendar, Month, etc.)
• Fix missing selected styles in Menu component when navigating with keyboard
• Add option to customize am/pm labels to TimeInput component (#1599)
• Change how autoComplete and type attributes are handled in MultiSelect, Autocomplete and Select components
• Fix broken inline code padding styles in TypographyStylesProvider component (#1611)
• Fix incorrect focus managing logic in Modal and Drawer components when trapFocus prop is set to false (#1596 #1597)
• Fix incorrect on / off label positions in Switch component when labels have only one letter
• Fix composition events handling (unexpected IME submit on Enter key pressed) in MultiSelect component (#1570)
• Fix console errors produced by use-move hook (used in Slide and ColorPicker) (missing passive option in event handler options)

• Fix multiple intervals started when interval.start() function is called with use-interval (#1498)
• Change ServerStyles return type to avoid TypeScript strict mode issues with Next.js (#1569)
• Fix error not clearing when field value changes after validation with schema in use-form hook

• Add missing FormList type export to @mantine/form package
• Fix Dropzone component throwing error if files were rejected and onReject function was not provided
• Fix transitionTimingFunction prop not working in Modal and Drawer components
• Add mime type for .exe files in @mantine/dropzone package (#1515)
• Add support for separator as first character in NumberInput (#1530)
• Fix am/pm not working on Android in TimeInput component (#1534)
• Fix error range is null on image upload in RichTextEditor (#1514)
• Add openDropdownOnClear prop to DatePicker and DateRangePicker components (#1497)

• Improve custom color typescript override to allow colors autocomplete in components props (#1468)
• Fix incorrect aria-owns attribute in Select, MultiSelect and Autocomplete components (#1485)
• Make Step loader inherit color from parent item in Stepper component
• Add UseListStateHandlers type export from @mantine/hooks package
• Fix incorrect ref type in DatePicker and DateRangePicker components
• Add exitTransitionDuration prop support to LoadingOverlay component
• Fix missing selected item highlighted styled in TransferList component

• Fix multiple RichTextEditor errors and visual bugs
• Add missing accessible role to Pagination (#1432)
• Use style instead of sx to set thumb position to improve Slider and RangeSlider performance (#1437)
• Allow the - symbol in an empty NumberInput (#1445)
• Fix incorrect sx array type for strict TypeScript mode (#1447)
• Clear milliseconds value on input value change in TimeInput (#1464)
• Allow hex colors (and other CSS values) in color prop in Divider component
• Fix errors not cleared when value changes in lists in use-form hook (#1438)
• Fix action not registered in useEffect with registerSpotlightActions function in @mantine/spotlight

• Fix Menu click outside events not working when it is used within Drawer
• Fix onKeyDown prop not working correctly in MultiSelect component
• Add option to configure z-index to Indicator component and fix the issue when indicator appeared above modal
• Make use-form functions memoized to optimize rerenders (#1383)
• Fix registerSpotlightActions and removeSpotlightActions not working correctly in @mantine/spotlight (#1396)
• Fix Enter key not submitting form in Autocomplete component (#1364)

• Fix DateRangePicker popover not closing when user clicks outside on touch device
• Fix Alert a11y name without provided id
• Call onChange prop function when clearing TimeInput (#1342)
• Fix labelProp color property getting overwritten by Divider component color (#1343)
• Lock @emotion/* packages versions to prevent mismatch when installing with npm
• Fix incorrect value syncing for hooks with different local storage keys in use-local-storage hook
• Move font-smoothing styles to body element to allow overrides

View changelog with demos on Mantine docs website

primaryShade on theme

New theme.primaryShade property is used to determine which shade will be used for the components that have color prop,
it defaults to 6. Note that for some variants with dark color scheme primaryShade will not be used as it will cause contrast issues.

import { MantineProvider, Group, Button } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: 6 }}>
      <App />
    </MantineProvider>
  );
}

primaryShade can also be customized for dark and light color scheme separately:

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: { light: 6, dark: 8 } }}>
      <App />
    </MantineProvider>
  );
}

New features

• New use-focus-within hook detects if any element within has focus,
  it works the same way as :focus-within CSS selector
• New use-network hook returns current connection status
• New Indicator component
• SegmentedControl component now supports disabled items
• Calendar component now supports multiple selected dates
• Modal and Drawer components now support setting overlay blur
• Calendar, Month and DatePicker components now support custom day renderer with renderDay function:
• use-window-event hook now supports custom events
• use-local-storage hook now supports value sync in the same tab
• RichTextEditor now supports placeholder

• Add option to set id to root Modal element (#1270)
• Fix incorrect Tooltip behavior with disabled buttons (#1272)
• Add missing them default radius support to MultiSelect component (#1279)
• Fix warnings during SSR in SegmentedControl component (#1284)
• Add accessible name to RadioGroup component (#1285)
• Prioritize actions based on title in default filter function in @mantine/spotlight (#1304)
• Add ref support to Grid.Col component (#1314)
• Fix issue when it was impossible to override padding with sx or className in Container component
• Fix width and height not repected when inline element is used as root in Avatar component
• Fix values not provided for list fields validation rules in use-form hook

• Add name to Dropzone hidden input to support uncontrolled forms
• Fix use-fullscreen hook not working with some elements (#1212)
• Fix incorrect position of FloatingTooltip when it is used in flex container (#1219)
• Make MultiSelect search input width take the whole remaining space (#1235)
• Add option to configure clear button tab index in Select, MultiSelect and DatePicker components (#1243)
• Add initial value support to use-media-query, use-color-scheme and use-reduced-motion hooks to avoid hydration mismatches (#1244)
• Fix Notification icon squishing when text is too large (#1215)
• Fix incorrect border styles of Aside component
• Fix incorrect form prop handling in Select and MultiSelect components
• Add missing role="alert" to Alert component (#1269)
• Fix rightSectionWidth prop not working in NumberInput component (#1266)
• Prevent required asterisk from being announced by screen reader in all inputs (#1267)
• Fix incorrect value and onChange types in RichTextEditor component (#1268)
• Remove initial item animation from SegmentedColor, fix item not being highlighted during SSR (#1264)
• Add numeric input mode to TimeInput component

• Remove selection color from inputs without free input in DatePicker and DateRangePicker components
• Fix incorrect lines offset in Prism component
• Make dropdownPosition default to flip in Autocomplete component (#1197)
• Fix paste not working on highlighted text in RichTextEditor (#1086)
• Fix uncontrolled DatePicker submitted value with Remix form (#1184)
• Fix notifications position for top-center and bottom-center positions (#1185)
• Add Styles API support to ColorSwatch component (#1165)
• Grid.Col not rendering without span prop when Grid has custom amount of columns
• Fix incorrect marks highlight logic for negative values in Slider and RangeSlider components
• Fix incorrect negative values handling in RangeSlider component
• Fix possible ts strict mode collisions in @mantine/next package

• Add hidden input with value to Select and MultiSelect components to provide correct values to uncontrolled forms (#1137)
• Fix incorrect styles params type when using styles prop on MantineProvider (#1166)
• Add better default items filtering logic and filterDataOnExactSearchMatch prop support to Select component
• Fix autoClose spread to Notification component in @mantine/notifications (#1129)
• Fix Select, MultiSelect, Autocomplete React keys warning when used with numeric values (#1153)
• Remove double render from ColorSchemeProvider
• Fix line number spacing in Prism component (#1156)
• Fix allowLevelChange prop not working with DateRangePicker component (#1157)
• Improve Enter key handling in Select component

• Fix PasswordInput not respecting theme default radius (#1149)
• Fix broken cleanNotificationsQueue function (#1123)
• Make UnstyledButton component polymorphic
• Migrate focus ring styles to outline to avoid box-shadow collisions
• Remove !important from InputWrapper styles
• Fix unexpected attributes added to Grid.Col component

View changelog with demos on Mantine website

@mantine/notifications improvements

Events based functions

Notifications system functions were migrated to
custom events,
they are no longer depend on context and can be called in any part of application.
Old way with useNotifications hook will work until version 5.0 release.

@mantine/notifications now exports the following functions:

• showNotification – adds given notification to notifications list or queue depending on current state and limit
• updateNotification – updates notification that was previously added to the state or queue
• hideNotification – removes notification with given id from notifications state and queue
• cleanNotifications – removes all notifications from notifications state and queue
• cleanNotificationsQueue – removes all notifications from queue

classNames prop on MantineProvider

Same as with styles you can now add classes to all components with classNames prop on MantineProvider.
This approach is useful when you want to styles components with utility based CSS libraries.

import { MantineProvider, Button } from '@mantine/core';

function App() {
  return (
    <MantineProvider classNames={{ Button: { root: 'button-root', label: 'button-label' } }}>
      <Button>All Button components will have the classes above</Button>
    </MantineProvider>
  );
}

Mantine CSS variables

You can now set withCSSVariables prop on MantineProvider to add
Mantine CSS variables from theme to :root.
This option is useful when you want to use Mantine theme values with CSS/SCSS or css-in-js libraries that do not have Mantine theme context.

import { MantineProvider } from '@mantine/core';

function App() {
  return (
    <MantineProvider withCSSVariables>
      <YourApp />
    </MantineProvider>
  );
}

Then you will be able to use variables anywhere in your CSS:

.my-button {
  background-color: var(--mantine-color-blue-6);
  font-family: var(--mantine-font-family);
  line-height: var(--mantine-line-height);
}

sx array syntax

All components now support arrays in sx prop. It can be to simultaneously use sx prop and add it from props:

import { Button, Sx } from '@mantine/core';

interface MyButtonProps {
  sx?: Sx;
}

function MyButton({ sx }) {
  return <Button sx={[{ color: 'red' }, sx]}>My Button</Button>;
}

Stack component

New Stack component is a replacement for Group with vertical direction.

FloatingTooltip component

New FloatingTooltip component – tooltip will follow mouse when it is over target element

Aside and Footer components

AppShell now supports Aside and Footer components,
they work the same way as Navbar and Header component but render content on the opposite side:

import React, { useState } from 'react';
import {
  AppShell,
  Navbar,
  Header,
  Footer,
  Aside,
  Text,
  MediaQuery,
  Burger,
  useMantineTheme,
} from '@mantine/core';

export default function AppShellDemo() {
  const theme = useMantineTheme();
  const [opened, setOpened] = useState(false);
  return (
    <AppShell
      styles={{
        main: {
          background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
        },
      }}
      navbarOffsetBreakpoint="sm"
      asideOffsetBreakpoint="sm"
      fixed
      navbar={
        <Navbar p="md" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }}>
          <Text>Application navbar</Text>
        </Navbar>
      }
      aside={
        <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
          <Aside p="md" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
            <Text>Application sidebar</Text>
          </Aside>
        </MediaQuery>
      }
      footer={
        <Footer height={60} p="md">
          Application footer
        </Footer>
      }
      header={
        <Header height={70} p="md">
          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
            <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
              <Burger
                opened={opened}
                onClick={() => setOpened((o) => !o)}
                size="sm"
                color={theme.colors.gray[6]}
                mr="xl"
              />
            </MediaQuery>

            <Text>Application header</Text>
          </div>
        </Header>
      }
    >
      <Text>Resize app to see responsive navbar in action</Text>
    </AppShell>
  );
}

Other changes

• Slider and RangeSlider components now support disabled state:
• @mantine/spotlight now exports event based functions to open/close spotlight and perform other actions from anywhere in your application (not only in components)
• Button, Badge, ThemeIcon and Text components now support hex color values in gradient prop
• Radio now supports setting transition duration and icon customization via props
• Slider and RangeSlider components now support precision prop
• Menu, List and Grid components were migrated to context, associated components (Menu.Item, List.Item, Grid.Col, etc.) can now be wrapper with other components and fragments
• useLocalStorageValue hook was renamed to useLocalStorage (old hook is still exported from @mantine/hooks)
• AppShell no longer parses props of Navbar and Header components, AppShell positioning logic was migrated to context and CSS variables, Navbar and Header components can now be wrapped with other components
• NextLink component was added to @mantine/next package to simplify Next.js Link usage with Menu
• Global component now supports array syntax for styles

• Fix iPad OS 13+ detection is use-os hook (#1095)
• Fix incorrect types for use-form when generic type is provided (#1107)
• Add less restrictive value validation to ColorInput component to allow value resetting to empty string with controlled input

• Remove unexpected focus ring from Modal, Drawer and Popover component on iOS Safari
• Add option to change font size in Table component
• Make onClose handler optional in Notification component
• Add root selector to Divider component Styles API
• Change inputMode to allow user to enter negative numbers on mobile in NumberInput component
• Add index to applyWhere handler in use-list-state hook
• Fix dropdown visibility for Select/MultiSelect components with no data
• Fix incorrect maxSelectedValues handling for controlled MultiSelect

• Remove outdated Styles API selectors from Tooltip component
• Fix incorrect nested Accordions icons rotation
• Fix labelProps, errorProps, descriptionProps props not working in all inputs
• Fix incorrect falsy values serialization logic in use-local-storage hook (#1038)
• Add option to configure highlight color in @mantine/spotlight (#1039)
• Fix Select, Autocomplete and MultiSelect dropdowns closing Popover on item select (#1014)
• Add option to use array and object syntax in global styles (Global component)
• New guide to load fonts with Global component – https://mantine.dev/theming/global-styles/#load-fonts
• New guide to store color scheme in cookie with Next.js – https://mantine.dev/theming/dark-theme/#save-color-scheme-in-cookie

• Migrate Grid component to context, it no longer parses children. Grid.Col components can now be wrapped in fragments
• Add precision prop support to Slider and RangeSlider components (#1034)
• Fix innerInput Styles API selector not working in PasswordInput component (#1025)

• Add reusable return types to use-list-state hook (#1011)
• Fix incorrect Navbar offset with base width in AppShell component
• Add missing teal color to types