@mantine/remix 5.5.0 on Node.js NPM

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