5.5.0

View changelog with demos on mantine.dev website

Global styles on theme

You can now add global styles with theme.globalStyles,
this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):

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

function Demo() {
  return (
    <MantineProvider
      theme={{
        globalStyles: (theme) => ({
          '*, *::before, *::after': {
            boxSizing: 'border-box',
          },

          body: {
            ...theme.fn.fontStyles(),
            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
            color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
            lineHeight: theme.lineHeight,
          },

          '.your-class': {
            backgroundColor: 'red',
          },

          '#your-id > [data-active]': {
            backgroundColor: 'pink',
          },
        }),
      }}
    >
      <App />
    </MantineProvider>
  );
}

form.setValues partial

form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

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

const form = useForm({ initialValues: { name: '', email: '', age: 0 } });

form.setValues({ name: 'John', age: 21 });
form.values; // -> { name: 'John', email: '', age: 21 }

Documentation updates

• Polymorphic components now display polymorphic badge next to component name (see Text as reference)
• New Usage with Storybook guide
• New Usage with TypeScript guide

Other changes

• Checkbox indeterminate state now has separate styles for checked and unchecked states
• Modal component now supports size="auto"
• Checkbox, Radio and Switch
  components now support error, description and labelPosition props
• Tooltip and Popover components now can be used with inline elements
• Slider and RangeSlider components now support inverted prop
• Collapse component now supports axis prop
• Table component now supports withBorder and withColumnBorders props
• NumberInput component now supports removeTrailingZeros prop
• Popover and Menu components now support disabled prop
• nprogress now supports new completeNavigationProgress handler

New Contributors

• @TheKinng96 made their first contribution in #2554
• @hckhanh made their first contribution in #2585
• @PointSingularity made their first contribution in #2547
• @devstardude made their first contribution in #2528

Full Changelog: 5.4.2...5.5.0