5.7.0

View changelog with demos on mantine.dev website

Style props

All Mantine components now support responsive style props:

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

function Demo() {
  return (
    <Box
      w={{ base: 200, sm: 400, lg: 500 }}
      py={{ base: 'xs', sm: 'md', lg: 'xl' }}
      bg="blue.7"
      c="#fff"
      ta="center"
      mx="auto"
    >
      Box with responsive style props
    </Box>
  );
}

Flex component

Flex component is an alternative to Group and Stack components.
It supports new responsive style props:

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

function Demo() {
  return (
    <Flex
      direction={{ base: 'column', sm: 'row' }}
      gap={{ base: 'sm', sm: 'lg' }}
      justify={{ sm: 'center' }}
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}

Focus ring styles on theme

You can now customize focus ring styles for all components in MantineProvider:

function Demo() {
  return (
    <MantineProvider
      inherit
      theme={{
        focusRingStyles: {
          // reset styles are applied to <button /> and <a /> elements
          // in &:focus:not(:focus-visible) selector to mimic
          // default browser behavior for native <button /> and <a /> elements
          resetStyles: () => ({ outline: 'none' }),

          // styles applied to all elements expect inputs based on Input component
          // styled are added with &:focus selector
          styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),

          // focus styles applied to components that are based on Input
          // styled are added with &:focus selector
          inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
        },
      }}
    >
      <Group grow>
        <Button>Move focus with tab</Button>
        <TextInput placeholder="Focus input to see styles override" />
      </Group>
    </MantineProvider>
  );
}

Responsive Header and Footer height

Header and Footer components now support responsive height:

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

function Demo() {
  return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
}

Other changes

• Collapse component now supports axis prop, it is now possible to animate width
• Button component now supports loaderPosition="center"
• Carousel now supports onSlideChange prop
• MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
• use-form onSubmit can now be called without form event
• Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

New Contributors

• @odysseaspapadimas made their first contribution in #2785
• @BenHakimIlyass made their first contribution in #2844
• @Manas-Nagelia made their first contribution in #2857

Full Changelog: 5.6.4...5.7.0