7.1.0 ⭐

CSS layers

Starting from 7.1.0 it is possible to import all @mantine/* packages styles with rules
defined in mantine CSS layer.
CSS rules within a layer are grouped together and applied before rules without a layer. This means that
even if you do not have control over styles import order, you can still override Mantine styles with
regular styles.

// If your styles are not wrapped in @layer directive,
// they will be applied after Mantine styles.
// Import order does not affect styles in this case
import classes from './Demo.module.css';
import '@mantine/core/styles.layer.css';

You can import styles within a layer by importing @mantine/*/styles.layer.css files.
Note that these files are a full replacement for @mantine/*/styles.css files –
you should not import both of them.

import '@mantine/core/styles.layer.css';
import '@mantine/dates/styles.layer.css';
// ... other styles

CSS layers are also useful if you want to combine Mantine components with other libraries which also
provide styles. You can use @layer directive to control the order of styles:

@layer base, mantine, components;

In this example, Mantine styles will take precedence over other library base styles, but other library
components styles will take precedence over Mantine component styles.

As of September 2023, CSS layers are supported in all modern browsers and have 90% browser support.

renderRoot prop

All polymorphic components now support renderRoot prop, which
is an alternative to component prop. renderRoot prop allows changing the root element
to any other component or HTML tag with a callback function. It can be used in cases when
component prop is not flexible enough:

• Target component props are incompatible with Mantine component. For example, Button component expects className
  to be a string, but react-router-dom NavLink expects
  className to be a function.
• Target component is a generic – it either accepts type as a parameter or its type changes depending
  on its props. Examples: typed Next.js Link, TanStack router Link

renderRoot example with react-router-dom NavLink:

import cx from 'clsx';
import { Button } from '@mantine/core';
import { NavLink } from 'react-router-dom';

function Demo() {
  return (
    <Button
      renderRoot={({ className, ...others }) => (
        <NavLink
          className={({ isActive }) => cx(className, { 'active-class': isActive })}
          {...others}
        />
      )}
    >
      React router NavLink
    </Button>
  );
}

renderRoot example with typed Next.js Link:

import Link from 'next/link';
import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button renderRoot={(props) => <Link href="/hello" {...props} />}>
      Typed Next link button
    </Button>
  );
}

Improved ESM support

All @mantine/* packages now have improved ESM support:

• Files in esm folder now have .mjs extension
• You can use @mantine/* packages with type: module in package.json without any additional configuration
• All packages are now fully compatible with Remix v2
• Tree shaking was improved for some bundlers

CSS variables in style prop

It is now possible to define CSS variables in style prop in all Mantine components –
style prop is no longer restricted by React.CSSProperties type:

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

function Demo() {
  return <Box style={{ '--radius': '0.5rem', borderRadius: 'var(--radius)' }} />;
}

form.setInitialValues

@mantine/form now supports form.setInitialValues method
which allows updating initial values after the form was initialized. This method is useful when you
want to update values that are used in form.reset and to compare values for dirty fields state:

import { useEffect } from 'react';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    initialValues: {
      name: '',
      email: '',
    },
  });

  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then((data) => {
        // Update initial values after form was initialized
        // These values will be used in form.reset
        // and to compare values to get dirty state
        form.setInitialValues(data);
        form.setValues(data);
      });
  }, []);
}

7.0.2

What's Changed

• [@mantine/dates] Fix DatePickerInput and other similar inputs not having correct height when used without placeholder
• [@mantine/core] MultiSelect: Fix check icon not displayed in selected grouped options
• [@mantine/dates] Fix broken esm imports of dayjs plugins (#4875)

New Contributors

• @BengtHagemeister made their first contribution in #4875

Full Changelog: 7.0.1...7.0.2

7.0.1

What's Changed

• [@mantine/core] Loader: Make dots loader look the same as in v6 (#4801)
• [@mantine/core] Button: Fix incorrect disabled styles of outline variant (#4815)
• [@mantine/core] Fix broken theme.other type override type in .d.ts files (#4831)
• [@mantine/core] SegmentedControl: Fix error when selected item removed from the data array (#4122)
• [@mantine/core] AppShell: Fix AppShell.Main not taking up full height (#4842)
• [@mantine/core] Input: Fix incorrect focus styles when error prop is set (#4832)
• [@mantine/core] Add clearable prop back to Select, MultiSelect and TagsInput components
• [@mantine/core] Portal: Reduce output DOM structure to a single div element, add data-portal attribute to the root portal element to indentify portals in devtools
• [@mantine/code-highlight] Add missing static classes on CodeHighlight and CodeHighlightTabs components
• [@mantine/hooks] use-local-storage: Fix hook throwing error if local storage is blocked by user (#3259)
• [@mantine/tiptap] Fix onBlur called each time controls are clicked (#3209)
• [@mantine/core] Add aria-describedby and aria-labelledby attributes to Radio.Group, Checkbox.Group and Switch.Group components (#3170)
• [@mantine/core] Spoiler: Add aria-expanded and aria-controls attributes to show/hide control (#3183)
• [@mantine/core] Spoiler: Change tab order of the show/hide button to make it receive focus before the content (#3183)
• [@mantine/form] Fix incorrect values type in deeply nested validation rules (#4735)
• [@mantine/dates] DateTimePicker: Set seconds to 0 if withSecond prop is not set (#4737)
• [@mantine/dropzone] Fix Dropzone.FullScreen staying opened after file was droppped for the first time (#4580)
• [@mantine/core] Modal: Fix closeButtonProps not including CloseButtonProps (#4793)
• [@mantine/core] Select: Fix id prop not setting id attribute on the input element (#4809)
• [@mantine/core] Allow using custom keys in theme.spacing and other similar values when theme is extended with createTheme
• [@mantine/core] PasswordInput: Fix input field not taking entire width of the field in Firefox
• [@mantine/core] Add default props to Group and Stack to prevent unwanted inheritance
• [@mantine/core] Menu: Fix dropdown opening when keepMounted prop is set and outside click is registered
• [@mantine/core] Select: Fix search value not updating when data array changes (#4822)
• [@mantine/core] Fix broken colors override type (#4816)
• [@mantine/core] Table: Fix row hover not working in dark mode when striped prop is set (#4817)
• [@mantine/core] Fix styles breaking if color scheme value in local storage is not valid

New Contributors

• @jason-lee88 made their first contribution in #4778
• @suenalaba made their first contribution in #4794
• @Brucia323 made their first contribution in #4800
• @WillKirkmanM made their first contribution in #4813
• @iamtomffee made their first contribution in #4818
• @mateuscqueiros made their first contribution in #4817
• @matheusvellone made their first contribution in #4816
• @DoubleJ-G made their first contribution in #4822
• @eluce2 made their first contribution in #4835
• @MrMaina100 made their first contribution in #4848
• @RobinTTY made their first contribution in #4842
• @jonavila made their first contribution in #4801
• @Codeprinz-1 made their first contribution in #4569
• @jopesh made their first contribution in #4792
• @chrisbendel made their first contribution in #4872

Full Changelog: 7.0.0...7.0.1

7.0.0 🎉

Migration to native CSS

Mantine no longer depends on Emotion for styles generation. All @mantine/*
packages are now shipped with native CSS files which can be imported from @mantine/{package}/styles.css,
for example:

import '@mantine/core/styles.css';

This change improves performance, reduces bundle size of the library and allows using Mantine
in environments where CSS-in-JS is not supported (or supported with limitations), for example,
Next.js app directory.

Important breaking changes:

• createStyles function is no longer available, use CSS modules or any other styling solution of your choice instead
• Components no longer support sx prop. You can use className or style props instead.
• styles prop no longer supports nested selectors

It is now recommended to use CSS modules to style Mantine components.
To update your project to CSS modules, follow the 6.x → 7.x migration guide.

Vanilla extract integration

If you prefer CSS-in-JS syntax for styling, you can use Vanilla extract
as a TypeScript CSS preprocessor. You will be able to use most of Mantine styling features
with Vanilla extract.

System color scheme support

All components now support system color scheme – when colorScheme value is auto,
components will use prefers-color-scheme media query to determine if the user prefers light or dark color scheme.

Note that auto is not the default value. You need to set it manually to enable system color scheme support
both on MantineProvider and in ColorSchemeScript:

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

function Demo() {
  return (
    <>
      <ColorSchemeScript defaultColorScheme="auto" />
      <MantineProvider defaultColorScheme="auto">
        <App />
      </MantineProvider>
    </>
  );
}

Built-in color scheme manager

MantineProvider now comes with a built-in color scheme manager.
It is no longer required to use any other components to set up color scheme logic.
Color scheme can be changed with useMantineColorScheme hook:

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

function Demo() {
  const { setColorScheme, clearColorScheme } = useMantineColorScheme();

  return (
    <Group>
      <Button onClick={() => setColorScheme('light')}>Light</Button>
      <Button onClick={() => setColorScheme('dark')}>Dark</Button>
      <Button onClick={() => setColorScheme('auto')}>Auto</Button>
      <Button onClick={clearColorScheme}>Clear</Button>
    </Group>
  );
}

CSS modules and PostCSS preset

CSS modules is now the recommended way to style Mantine components,
although it is not required – you can choose any other styling solution of your choice.

It is also recommended to use postcss-preset-mantine. It includes
mixins and functions to simplify styling of Mantine components. postcss-preset-mantine
is included in all templates.

Global styles

Mantine no longer includes normalize.css. Instead, it uses a bare minimum set of global styles.
These styles are part of the @mantine/core package and are applied automatically when you import
@mantine/core/styles.css in your application. Note that these styles cannot be decoupled from the
rest of the library.

Mantine as a headless UI library

You can now use Mantine as a headless library. To achieve that, just do not import
@mantine/*/styles.css in your application. Then you will be able to apply styles with
Styles API.

createTheme function

createTheme function is a replacement for MantineThemeOverride type. Use it to create a theme
override, it will give you autocomplete for all theme properties:

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

const theme = createTheme({
  fontFamily: 'sans-serif',
  primaryColor: 'orange',
});

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

Components extend functions

All components that support default props or Styles API now have a static extend function which allows getting autocomplete when customizing
defaultProps, classNames and styles of the component
on theme:

import { useState } from 'react';
import { TextInput, MantineProvider, createTheme } from '@mantine/core';
import classes from './Demo.module.css';

const theme = createTheme({
  components: {
    TextInput: TextInput.extends({
      styles: (theme, props) => ({
        input: {
          fontSize: props.size === 'compact' ? theme.fontSizes.sm : undefined,
        }
      })
      classNames: {
        root: classes.root,
        input: classes.input,
        label: classes.label,
      },

      defaultProps: {
        size: 'compact',
      },
    }),
  },
});

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

classNames based on component props

You can now get component props in classNames and styles to conditionally apply styles.
This feature is a more powerful replacement for styles params.

import cx from 'clsx';
import { MantineProvider, createTheme, TextInput } from '@mantine/core';
import classes from './Demo.module.css';

const theme = createTheme({
  components: {
    TextInput: TextInput.extend({
      classNames: (_theme, props) => ({
        label: cx({ [classes.labelRequired]: props.required }),
        input: cx({ [classes.inputError]: props.error }),
      }),
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <TextInput required label="Required input" placeholder="Required input" />
      <TextInput error label="Input with error" placeholder="Input with error" mt="md" />
    </MantineProvider>
  );
}

.labelRequired {
  color: var(--mantine-color-red-filled);
}

.inputError {
  background-color: var(--mantine-color-red-light);
}

Components CSS variables

You can now customize components CSS variables to change component styles based on its props.
For example, it can be used to add new sizes:

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

const theme = createTheme({
  components: {
    Button: Button.extend({
      vars: (theme, props) => {
        if (props.size === 'xxl') {
          return {
            root: {
              '--button-height': rem(60),
              '--button-padding-x': rem(30),
              '--button-fz': rem(24),
            },
          };
        }

        if (props.size === 'xxs') {
          return {
            root: {
              '--button-height': rem(24),
              '--button-padding-x': rem(10),
              '--button-fz': rem(10),
            },
          };
        }

        return { root: {} };
      },
    }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button size="xxl">XXL Button</Button>
        <Button size="xxs">XXS Button</Button>
      </Group>
    </MantineProvider>
  );
}

New variants system

All components now have data-variant attribute on the root element, even if the component does not have any predefined variants.
You can use it to apply styles to all components of the same type on theme:

import { Input, MantineProvider, createTheme } from '@mantine/core';
import classes from './Demo.module.css';

// It is better to add new variants in theme.components
// This way you will be able to use them in anywhere in the app
const theme = createTheme({
  components: {
    Input: Input.extend({ classNames: classes }),
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Input variant="underline" placeholder="Underline input" />
      <Input variant="filled" placeholder="Filled input" mt="md" />
    </MantineProvider>
  );
}

.input {
  &[data-variant='underline'] {
    border-bottom: rem(2px) solid;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;

    @mixin light {
      border-color: var(--mantine-color-gray-3);
    }

    @mixin dark {
      border-color: var(--mantine-color-dark-3);
    }

    &:focus {
      border-color: var(--mantine-color-blue-filled);
    }
  }
}

New sizes system

There are multiple ways to customize component sizes:

• With data-size attribute
• With component CSS variables
• With static CSS variables

Example of customizing [Button](https://mantine.dev/core/b...

6.0.21

Last 6.x patch

This is the last patch for 6.x (at least for a while), next version that will be released is 7.0.0. If you haven't checked v7 yet, you can review it here – https://v7.mantine.dev/

What's Changed

• [@mantine/core] Fix Radio and Checkbox components do not receive padding when a value of 0 is passed into the label prop (#4755)
• [@mantine/dates] Fix incorrect accessible name set on DatePickerInput and other similar components (#4750)

New Contributors

• @qaynam made their first contribution in #4755

Full Changelog: 6.0.20...6.0.21

6.0.20

What's Changed

• [@mantine/dates] Calendar: Fix incorrect hasNextLevel prop type (#4682)
• [@mantine/core] PasswordInput: Set autocomplete="off" to prevent passwords logging in console (#4564)
• [@mantine/core] BackgroundImage: Fix image not loading if given image url contains whitespace (#4715)
• [@mantine/dates] Fix: DatePickerInput and DateTimePicker label click does not focusing the input (#4634)
• [@mantine/core] PinInput: Fix OTP paste not working from Google Keyboard on Android (#4641)
• [@mantine/core] Grid: Fix id prop not being passed to the root element (#4666)
• [@mantine/tiptap] Fix incorrect color displayed in ColorPickerControl (#4667)
• [@mantine/core] Anchor: Fix incorrect inherited types from Text (#4695)

New Contributors

• @hiddenLadder made their first contribution in #4642
• @HarshitDoshi made their first contribution in #4692
• @marwinburesch made their first contribution in #4703
• @HoHieuLuc made their first contribution in #4667
• @lscheibel made their first contribution in #4666
• @saeidalidadi made their first contribution in #4641
• @rommelmamedov made their first contribution in #4634
• @blueagler made their first contribution in #4715
• @yeana-dev made their first contribution in #4712

Full Changelog: 6.0.19...6.0.20

6.0.19

What's Changed

• [@mantine/dates] DateTimePicker: Add option to get time input ref with timeInputProps
• [@mantine/hooks] Fix unexpected breaking change introduced in useResizeObserver in the previous patch (#4632)
• [@mantine/dates] Fix incorrect Calendar prop types definition (#4638)

New Contributors

• @raul-repos made their first contribution in #4630

Full Changelog: 6.0.18...6.0.19

6.0.18

What's Changed

• [@mantine/core] Spoiler: Fix control button flickering on rerender (#4512)
• [@mantine/tiptap] Fix incorrect color displayed in color control in dark color scheme (#4560)
• [@mantine/core] Pagination: Fix incorrect disabled styles when control node is changed to link (#4578)
• [@mantine/core] Modal: Make body's zIndex same as overlay's to allow modals stacking (#4587)
• [@mantine/core] Avatar: Fix incorrect placeholder icon dimensions (#4600)
• [@mantine/dates] Fix defaultDate overriding value prop (#4624)

New Contributors

• @mattaningram made their first contribution in #4600
• @ItaiAxelrad made their first contribution in #4578
• @hellolol2016 made their first contribution in #4560
• @KurtGokhan made their first contribution in #4512

Full Changelog: 6.0.17...6.0.18

6.0.17

What's Changed

• [@mantine/carousel] Remove x.clickAllowed to support embla 8.x (#4357, #4174)
• [@mantine/core] PasswordInput: Remove rightSection associated props to avoid confusion (#4436)
• [@mantine/core] Menu: Fix up and down keys not working when first Menu.Item is disabled (#4411)
• [@mantine/spotlight] Fix target prop not working (#4494)
• [@mantine/core] Switch: Fix incorrect label styles in RTL (#4515)
• [@mantine/core] Slider: Fix decimal step without precision prop not working (#4538)
• [@mantine/core] Rating: Fix readOnly prop not working with defaultValue (#4525)
• [@mantine/core] Modal: Migrate to dvh units to fix incorrect styles in mobile Safari (#4517)
• [@mantine/dates] DateInput: Decouple clearable and allowDeselect logic, allow disabling allowDeselect if clearable is set (#4527)
• [@mantine/dates] DatePickerInput: Fix defaultDate prop not working (#4532)

New Contributors

• @connershoop made their first contribution in #4517

Full Changelog: 6.0.16...6.0.17

6.0.16

What's Changed

• [@mantine/dates] DatePicker: Fix onMonthSelect not passed down to Calendar component (#4441)
• [@mantine/prism] Fix unexpected code margin when used within TypographyStylesProvider (#4452)
• [@mantine/dates] DateTimePicker: Fix onClick function from submitButtonProps overriding default behavior (#4465)
• [@mantine/dates] Fix date pickers placeholders not having correct color when parent input has error (#4469)
• [@mantine/core] MultiSelect: Fix portalProps prop not working (#4485)
• [@mantine/core] Fix rem units errors with svg elements in all components (#4491)
• [@mantine/dates] DateInput: Fix stale calendar UI after clear button was clicked (#4486)
• [@mantine/core] Slider: Fix onChange prop updates being ignored (#4497)

New Contributors

• @Bastian made their first contribution in #4497
• @aschenkuttel made their first contribution in #4491
• @alessandroaw made their first contribution in #4469
• @wojonet made their first contribution in #4465
• @thascoet made their first contribution in #4441

Full Changelog: 6.0.15...6.0.16