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

6.0.15

What's Changed

• [@mantine/core] Alert: Fix incorrect close button styles in filled variant
• [@mantine/core] Fix incorrect Slider and RangeSlider precision with keyboard events
• [@mantine/core] PinInput: Fix incorrect focus behavior when Backspace key is pressed (#4438)
• [@mantine/core] Table: Fix withColumnBorders prop not working (#4443)
• [@mantine/spotlight] Improve search performance for large actions lists (#4457)

New Contributors

• @Asipita made their first contribution in #4444
• @mrbnclt made their first contribution in #4438

Full Changelog: 6.0.14...6.0.15

6.0.14

What's Changed

• [@mantine/hooks] use-window-event: Improve events type (#4423)
• [@mantine/core] MultiSelect: Fix hoverOnSearchChange not working correctly when creatable prop is set (#4344)
• [@mantine/tiptap] Add option to configure initial state of external link control (#4373)
• [@mantine/core] PinInput: Fix incorrect Backspace key handling (#4379)
• [@mantine/core] Table: Fix table styles applied to the nested table elements, for example in dropdowns (#4393)
• [@mantine/core] Image: Fix image alt overflow in Firefox (#4410)

New Contributors

• @comphonia made their first contribution in #4410
• @skyt-a made their first contribution in #4373
• @vadimkiryanov made their first contribution in #4423

Full Changelog: 6.0.13...6.0.14

6.0.13

What's Changed

• [@mantine/dates] Fix nextIcon and previousIcon props not passed to Calendar component (#4273)
• [@mantine/core] AppShell: Fix wrong padding when navbarOffsetBreakpoint and asideOffsetBreakpoint have the same value (#4281)
• [@mantine/core] Select: Fix unexpected horizontal scrollbar in items with long text (#4296)
• [@mantine/core] NumberInput: Fix missing disabled controls styles (#4314)
• [@mantine/core] Fix Select/MultiSelect scrolling page when transitionProps are set (#4327)
• [@mantine/core] Chip: Fix unexpected line break when children are not a plain string (#4328)

New Contributors

• @omegahm made their first contribution in #4280
• @ot07 made their first contribution in #4290
• @richardboehme made their first contribution in #4314
• @andremonteiro95 made their first contribution in #4273

Full Changelog: 6.0.11...6.0.13