mantine

• Fix Tabs throwing an error when rendered with dynamic content (#416)
• Fix PasswordInput color in dark color scheme (#414) and alignment (#413)

Fix incorrectly memoized onChange function in Pagination component

• Fix misaligned PasswordInput in Firefox
• Fix variant not applied to PaaswordInput
• Add transparent color support to ColorPicker swatches

• Fix incorrect uuids generated after hydration in some cases
• Fix random autocomplete results appearing on inputs without static ids

• Make PasswordInput compatible with password managers, tested with 1password and lasspass (#387)
• Allow single date to be selected as range with allowSingleDateInRange prop in RangeCalendar and DateRangePicker components

• Fix incorrect styles applied to NumberInput controls while component is used without normalize.css
• Fix internal value not being updated in TimeInput and TimeRangeInput components while being in controlled mode

Add option to disable closing on click outside in Modal component with closeOnClickOutside={false} prop

• Fix Title component rendering incorrect element when bundled with Vite (#366)
• Add more instructions to contributing guide

• Fix Modal and Drawer jumping animation when scrollbars were removed before animation finished
• Fix incorrect up and down arrows handling in Select and MultiSelect components, which resulted in unexpected page scrolling on some devices

View changelog with demos on website

Breaking changes

• MediaQuery now requires passing styles object and does not hide child element by default
• Styles API static selectors no longer use kebab case (was .mantine-text-input-root, now .mantine-TextInput-root)

Configure emotion with MantineProvider

You can now set emotion cache options via MantineProvider:

<MantineProvider emotionOptions={{ key: "mantine", prepend: false }}>
  <App />
</MantineProvider>

With these options you can change styles insertion point (from 3.1 styles are prepended to head)
and configure stylis plugins. For example, you can use stylis-plugin-rtl to add rtl support:

import { MantineProvider } from "@mantine/core";
import rtlPlugin from "stylis-plugin-rtl";

function Demo() {
  return (
    <MantineProvider
      emotionOptions={{ key: "mantine", stylisPlugins: [rtlPlugin] }}
    >
      <App />
    </MantineProvider>
  );
}

Styles API on MantineProvider

You can now add styles to components with MantineProvider.
Styles will be added to every matching component rendered inside MantineProvider:

import { MantineProvider, Button, Badge } from "@mantine/core";

function Demo() {
  return (
    <MantineProvider
      styles={{
        Button: (theme) => ({
          // Shared button styles are applied to all buttons
          root: { height: 42, padding: "0 30px" },

          // These styles are applied only to buttons with outline variant
          outline: {
            // You can use any selectors inside (the same way as in createStyles function)
            "&:hover": {
              backgroundColor:
                theme.colorScheme === "dark"
                  ? theme.colors.dark[8]
                  : theme.colors.gray[0],
            },
          },
        }),

        // Use raw styles object if you do not need theme dependency
        Badge: {
          dot: {
            borderWidth: 2,
          },
        },
      }}
    >
      <Button variant="outline">Outline button</Button>
      <Button variant="filled">Filled button</Button>
      <Badge variant="dot">Dot badge</Badge>
    </MantineProvider>
  );
}

Inline styles with emotion

styles prop will no longer add inline styles, instead styles will be converted to emotion format.
This means that you now can subscribe to theme and use nested selectors in styles:

<Button
  styles={(theme) => ({
    outline: {
      "&:hover": {
        backgroundColor:
          theme.colorScheme === "dark"
            ? theme.colors.dark[8]
            : theme.colors.dark[0],
      },
    },

    root: {
      height: 56,
    },
  })}
>
  My custom button
</Button>

sx prop

All components now support sx prop. You can add styles to root element and subscribe to theme with it:

<Button
  sx={(theme) => ({
    borderColor: theme.colors.blue[9],
    "&:hover": {
      backgroundColor: theme.colors.blue[7],
    },
  })}
>
  Button with sx styles
</Button>

use-css hook

New use-css hook is a simpler alternative to createStyles function.
Hook returns css and cx functions. css function accepts styles object and returns class name:

import { useCss, Button } from "@mantine/core";

function Demo({ active }) {
  const { css, cx } = useCss();
  return (
    <Button
      className={cx(css({ backgroundColor: "red", opacity: 1 }), {
        [css({ opacity: 1 })]: active,
      })}
    >
      Custom button
    </Button>
  );
}

New components and hooks

New AppShell component allows you create responsive app shell with fixed or static position:

With Skeleton component you can create placeholders to indicate loading state:

<Skeleton height={50} circle mb="xl" />
<Skeleton height={8} radius="xl" />
<Skeleton height={8} mt={6} radius="xl" />
<Skeleton height={8} mt={6} width="70%" radius="xl" />

New use-scroll-into-view hook lets you scroll given node into view within scrollable container or body element:

import { useScrollIntoView } from '@mantine/hooks';
import { Button, Paper } from '@mantine/core';

function Demo() {
  const { scrollIntoView, targetRef, scrollableRef } = useScrollIntoView();

  return (
    <>
      <Paper ref={scrollableRef} style={{ overflowY: 'scroll', height: 300, flex: 1 }}>
        <Paper ref={targetRef}>Scroll me into view<</Paper>
      </Paper>

      <Button onClick={() => scrollIntoView()}>Scroll to target</Button>
    </>
  );
}

Box component allows you to utilize new sx prop to style any component or element:

<Box
  sx={(theme) => ({
    backgroundColor:
      theme.colorScheme === "dark"
        ? theme.colors.dark[6]
        : theme.colors.gray[0],
    textAlign: "center",
    padding: theme.spacing.xl,
    borderRadius: theme.radius.md,
    cursor: "pointer",

    "&:hover": {
      backgroundColor:
        theme.colorScheme === "dark"
          ? theme.colors.dark[5]
          : theme.colors.gray[1],
    },
  })}
>
  Box lets you add inline styles with sx prop
</Box>

New features

• Select and MultiSelect components now support custom scrollbars with react-custom-scrollbars package
• Collapse component now supports dynamic children – you can now use this feature in all components that are built with Collapse
• MediaQuery component now supports adding custom styles and subscribing to custom media queries
• use-list-state hook now has new applyWhere handler
• use-form hook now supports values on validation rule
• Slider and RangeSlider components were migrated to use-move hook and now supports showing label on hover (new default behavior)
• Add better focus management to Popover – now focus will be returned to last active element (made with use-focus-return hook)
• AvatarsGroup - now supports total prop to explicitly override the truncated length.
• Add onDropdownOpen and onDropdownClose handlers support to Select, MultiSelect and Autocomplete components

Bug fixes

• Fix incorrect focus handling in Menu, DatePicker and DateRangePicker which resulted in focus not being shifted to control/input when dropdown was closed
• Fix incorrect MultiSelect creatable filtering logic when the same item can be created multiple times
• Fix layout jumping on Windows and Linux when overlay components with scroll lock are opened (Modal and Drawer), see use-scroll-lock documentation to learn how to offset elements with fixed position
• Fix DatePicker dropdown not updating position when used near bottom edge of viewport
• Fix incorrect random ids generated during server side rendering in Next.js
• Prevent page from rendering twice in @mantine/next package

• Fix missing MediaQuery component export (#304)
• Adjust default dark theme colors to have better contrast

• Fix Alert component not triggering onClose when close button is clicked
• Fix use-full-screen hook bugs in Safari (#298)

• Fix incorrect handling of Button text overflow
• Documentation updates

• Fix text overflow in components: MultiSelect, DatePicker, DateRangePicker, Accordion, Button, Tooltip
• Add new pop transition to Transition component
• Replace default Modal transition with pop

Fix incorrectly defined types for Dialog, Tab and CloseButton components

View changelog with demos on Mantine website

Breaking changes

• Mantine was migrated to emotion from react-jss and no longer supports react-jss
• @mantine/core package no longer exports react-jss theming context, use createStyles instead
• All components no longer support themeOverride prop due to performance reasons
• elementRef prop was replaced with ref in all components
• Default line-height (theme.lineHeight) was increased from 1.4 to 1.55
• Default Container sizes were changed
• Divider component no longer supports margins prop, use mx or my instead
• createStyles function now returns an object of { classes, cx } instead of just classes

Migration to emotion

Mantine no longer uses react-jss, all components were migrated to emotion based css-in-js library
exposed as separate @mantine/styles package and as a part of @mantine/core. This means that you will have to:

• migrate all of your custom styles built with react-jss to new createStyles hook creator
• setup new strategy for server side rendering

createStyles

Read createStyles documentation

From version 3.0 createStyles is the main way to add styles to Mantine components. Core features:

• API is similar to react-jss
• As fast and lightweight as emotion: createStyles extends @emotion/react
• Subscribes to your Mantine theming context
• Supports all emotion features: automatic critical css extraction during server side rendering, lazy evaluation, dynamic theming, etc.
• Server side rendering support: Next.js, Gatsby or any other environment
• Fully featured TypeScript support

Basic createStyles usage example:

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

const useStyles = createStyles((theme, _params, getRef) => {
  const child = getRef('child');

  return {
    wrapper: {
      // subscribe to color scheme changes right in your styles
      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
      maxWidth: 400,
      width: '100%',
      height: 180,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginLeft: 'auto',
      marginRight: 'auto',
      borderRadius: theme.radius.sm,

      // Dynamic media queries, define breakpoints in theme, use anywhere
      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
        // Type safe child reference in nested selectors via ref
        [`& .${child}`]: {
          fontSize: theme.fontSizes.xs,
        },
      },
    },

    child: {
      // assign ref to element
      ref: child,
      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
      padding: theme.spacing.md,
      borderRadius: theme.radius.sm,
      boxShadow: theme.shadows.md,
      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
    },
  };
});

function Demo() {
  const { classes } = useStyles();

  return (
    <div className={classes.wrapper}>
      <div className={classes.child}>createStyles demo</div>
    </div>
  );
}

Server side rendering

Since Mantine now uses emotion instead of react-jss you will need to change server side rendering strategy.
Mantine now has 3 new packages to help you setup server side rendering:

• @mantine/ssr – general server side rendering utilities
• @mantine/next – Next.js specific ssr configurations
• gatsby-plugin-mantine – enable ssr in Gatsby

Follow these guides to get started with ssr:

• SSR with Next.js
• SSR with Gatsby.js
• General approach to SSR

Ref forwarding

All components that previously used elementRef were rebuilt with React.forwardRef, use ref prop to access element ref:

<TextInput ref={(node) => {}} />

Unique ids during ssr

It's no longer required to set static ids on Grid, Menu, all inputs and some other components
if you wrap your application in MantineProvider.

<TextInput /> // -> will render fine during ssr
<TextInput id="not-necessary" /> // -> id is no longer necessary

ColorSchemeProvider

ColorSchemeProvider is a new component that will help you manage color scheme (read full docs):

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

export default function Demo() {
  const [colorScheme, setColorScheme] = useState('light');
  const toggleColorScheme = (value?: ColorScheme) =>
    setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));

  return (
    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
      <MantineProvider theme={{ colorScheme }}>
        <App />
      </MantineProvider>
    </ColorSchemeProvider>
  );
}

// ...later in other component
import { ActionIcon, useMantineColorScheme } from '@mantine/core';
import { SunIcon, MoonIcon } from '@modulz/radix-icons';

function Demo() {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const dark = colorScheme === 'dark';

  return (
    <ActionIcon
      variant="outline"
      color={dark ? 'yellow' : 'blue'}
      onClick={() => toggleColorScheme()}
      title="Toggle color scheme"
    >
      {dark ? (
        <SunIcon style={{ width: 18, height: 18 }} />
      ) : (
        <MoonIcon style={{ width: 18, height: 18 }} />
      )}
    </ActionIcon>
  );
}

Margin props

All components now support setting following props to control margins:

• m – sets margin property on root element
• my – sets margin-top and margin-bottom properties on root element
• mx – sets margin-right and margin-left properties on root element
• mt – sets margin-top property on root element
• mb – sets margin-bottom property on root element
• ml – sets margin-left property on root element
• mr – sets margin-right property on root element

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

function Demo() {
  return (
    <div>
      <Button mx={20}>My button</Button>
      <TextInput mt="md" />
    </div>
  );
}

@mantine/dropzone package

@mantine/dropzone is a new package that includes Dropzone and FullScreenDropzone components.

• Dropzone component lets you capture files from user with drag 'n' drop:

• FullScreenDropzone works the same way as dropzone but instead of capturing dropped files from specific area it
  uses browser window as dropzone.

New features

• Select and MultiSelect components now support creating new items, items grouping and disabling

• Accordion component now supports more options to customize icons and labels:

  • iconPosition prop let's you choose where chevron icon will be rendered: right or left
  • with icon prop on Accordion and Accordion.Item components you can replace icons of all items at once or of each item individually

• Avatar component now supports stacking with AvatarsGroup:

New hooks

• use-resize-observer lets you subscribe to element size and position changes with ResizeObserver
• use-viewport-size hook returns viewport width and height
• use-mouse hook tracks mouse position over given element
• use-hover hook detects if mouse is over given element:

Other changes

• ActionIcon and Button components now support new default variant
• Pagination component now supports adding first and last controls and removing next/prev buttons
• SimpleGrid component now supports theme.breakpoints usage in breakpoints prop
• SimpleGrid was migrated to use CSS Grid Layout instead of flexbox
• Group component no longer supports Styles API, you can add styles directly to element and children instead
• New Space component lets you add spacing between elements without directly subscribing to theme
• Overlay and LoadingOverlay components now support radius prop
• New MediaQuery component provides a simple API to manage breakpoints in jsx

• Fix Next.js Pagination rendering in Next.js production (#253)
• Fix Pagination styles when used with large data sets (#251)
• Fix Next.js server side rendering documentation (#252)
• Fix TimeRangeInput usage demo (#254)

Release demos

View changelog with demos on Mantine website

UMD builds deprecation

All @mantine/ packages will no longer default to umd builds via browser field in package.json.
This change will simplify tree shacking for Webpack and should not affect your Next.js, Gatsby, Vite or CRA applications.

react-jss peer dependency removal

All @mantine/ packages no longer require react-jss installation as peer dependency – it will be installed automatically as @mantine/core dependency.
Instead of direct react-jss usage @mantine/core now exports createStyles function
and a set of components to implement server side rendering.

createStyles function

New createStyles function lets you create styles with Mantine theme:

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

const useStyles = createStyles((theme) => ({
  button: {
    backgroundColor: theme.colors.blue[6],
    color: theme.white,
    padding: [theme.spacing.md, theme.spacing.lg],
  },
}));

function Demo() {
  const classes = useStyles();
  return <button className={classes.button}>My button</button>;
}

Note that it will only work if your application is wrapped with MantineProvider.

Builtin server side rendering

@mantine/core package now comes with components to simplify server side rendering setup with Next.js and any other environment.
Checkout Next.js guide to learn more.

New package @mantine/rte

@mantine/rte is a new package with RichTextEditor component.
Component integrates seamlessly with your MantineTheme and provides all basic rich text editing features:

New components

Timeline component lets you show list of events in chronological order:

Navigate between multiple pages with new Pagination component (built by @EmilMalanczak):

Chips component is an inline alternative to RadioGroup and MultiSelect components:

List component is a wrapper for ul and ol lists with option to replace bullets with icons:

TimeRangeInput component allows to capture time range from user (built by @achmurali):

New hooks

• use-pagination – manage pagination state (built by @EmilMalanczak)
• use-focus-return – capture last focused element on the page and return focus to it once condition is met

New features

• New Dialog component lets you display fixed overlay at any side of the screen
• Button component now supports new white variant
• Text now supports font styles inheritance from parent element with inherit prop
• Paper component now supports withBorder prop to add 1px border
• ActionIcon component now supports loading state (same as in Button component)
• SegmentedControl component now supports setting data as an array of strings <SegmentedControl data={['React', 'Angular', 'Svelte', 'Vue']} /> (built by @cstrat)
• NumberInput component now supports decimal steps and precision

Fix ColorPicker and ColorInput losing hue value when color changes

• Fix color contrast in Code component with dark theme
• Fix Autocomplete dropdown opened with no results when input was clicked
• Fix ColorPicker and ColorInput incorrectly handling onChange event when user clicks on color swatches
• Alert icon now displayed next to all content, not title