Version 4.1.0

@mantine/notifications improvements

Events based functions

Notifications system functions were migrated to custom events, they are no longer depend on context and can be called in any part of application. Old way with useNotifications hook will work until version 5.0 release.

@mantine/notifications now exports the following functions:

• showNotification – adds given notification to notifications list or queue depending on current state and limit
• updateNotification – updates notification that was previously added to the state or queue
• hideNotification – removes notification with given id from notifications state and queue
• cleanNotifications – removes all notifications from notifications state and queue
• cleanNotificationsQueue – removes all notifications from queue

import { Group, Button } from '@mantine/core';
import { showNotification } from '@mantine/notifications';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() =>
          showNotification({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
          })
        }
      >
        Show notification
      </Button>
    </Group>
  );
}

Notifications customization

You can now use sx, style, className, classNames and styles props to customize notification styles:

import { Group, Button } from '@mantine/core';
import { showNotification } from '@mantine/notifications';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() =>
          showNotification({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
            styles: (theme) => ({
              root: {
                backgroundColor: theme.colors.blue[6],
                borderColor: theme.colors.blue[6],

                '&::before': { backgroundColor: theme.white },
              },

              title: { color: theme.white },
              description: { color: theme.white },
              closeButton: {
                color: theme.white,
                '&:hover': { backgroundColor: theme.colors.blue[7] },
              },
            }),
          })
        }
      >
        Show customized notification
      </Button>
    </Group>
  );
}

classNames prop on MantineProvider

Same as with styles you can now add classes to all components with classNames prop on MantineProvider. This approach is useful when you want to styles components with utility based CSS libraries.

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

function App() {
  return (
    <MantineProvider classNames={{ Button: { root: 'button-root', label: 'button-label' } }}>
      <Button>All Button components will have the classes above</Button>
    </MantineProvider>
  );
}

Mantine CSS variables

You can now set withCSSVariables prop on MantineProvider to add Mantine CSS variables from theme to :root. This option is useful when you want to use Mantine theme values with CSS/SCSS or css-in-js libraries that do not have Mantine theme context.

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

function App() {
  return (
    <MantineProvider withCSSVariables>
      <YourApp />
    </MantineProvider>
  );
}

Then you will be able to use variables anywhere in your CSS:

.my-button {
  background-color: var(--mantine-color-blue-6);
  font-family: var(--mantine-font-family);
  line-height: var(--mantine-line-height);
}

sx array syntax

All components now support arrays in sx prop. It can be to simultaneously use sx prop and add it from props:

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

interface MyButtonProps {
  sx?: Sx;
}

function MyButton({ sx }) {
  return <Button sx={[{ color: 'red' }, sx]}>My Button</Button>;
}

Stack component

New Stack component is a replacement for Group with vertical direction:

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

function Demo() {
  return (
    <Stack sx={(theme) => ({ backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0], height: 300 })}>
      <Button variant="outline">1</Button>
      <Button variant="outline">2</Button>
      <Button variant="outline">3</Button>
    </Stack>
  );
}

FloatingTooltip component

New FloatingTooltip component:

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

function Demo() {
  return (
    <FloatingTooltip label="Tooltip">
      <Button variant="outline" color="gray" size="xl">
        With tooltip
      </Button>
    </FloatingTooltip>
  );
}

Aside and Footer components

AppShell now supports Aside and Footer components, they work the same way as Navbar and Header component but render content on the opposite side:

import React, { useState } from 'react';
import {
  AppShell,
  Navbar,
  Header,
  Footer,
  Aside,
  Text,
  MediaQuery,
  Burger,
  useMantineTheme,
} from '@mantine/core';

export default function AppShellDemo() {
  const theme = useMantineTheme();
  const [opened, setOpened] = useState(false);
  return (
    <AppShell
      styles={{
        main: {
          background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
        },
      }}
      navbarOffsetBreakpoint="sm"
      asideOffsetBreakpoint="sm"
      fixed
      navbar={
        <Navbar p="md" hiddenBreakpoint="sm" hidden={!opened} width={{ sm: 200, lg: 300 }}>
          <Text>Application navbar</Text>
        </Navbar>
      }
      aside={
        <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
          <Aside p="md" hiddenBreakpoint="sm" width={{ sm: 200, lg: 300 }}>
            <Text>Application sidebar</Text>
          </Aside>
        </MediaQuery>
      }
      footer={
        <Footer height={60} p="md">
          Application footer
        </Footer>
      }
      header={
        <Header height={70} p="md">
          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
            <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
              <Burger
                opened={opened}
                onClick={() => setOpened((o) => !o)}
                size="sm"
                color={theme.colors.gray[6]}
                mr="xl"
              />
            </MediaQuery>

            <Text>Application header</Text>
          </div>
        </Header>
      }
    >
      <Text>Resize app to see responsive navbar in action</Text>
    </AppShell>
  );
}

New features

Slider and RangeSlider components now support disabled state:

import { Slider, RangeSlider } from '@mantine/core';

function Demo() {
  return (
    <>
      <Slider defaultValue={60} disabled />
      <RangeSlider
        mt="xl"
        mb="xl"
        disabled
        defaultValue={[25, 75]}
        marks={[
          { value: 0, label: 'xs' },
          { value: 25, label: 'sm' },
          { value: 50, label: 'md' },
          { value: 75, label: 'lg' },
          { value: 100, label: 'xl' },
        ]}
      />
    </>
  );
}

Other changes

• @mantine/spotlight now exports event based functions to open/close spotlight and perform other actions from anywhere in your application (not only in components)
• Button, Badge, ThemeIcon and Text components now support hex color values in gradient prop
• Radio now supports setting transition duration and icon customization via props
• Slider and RangeSlider components now support precision prop
• Menu, List and Grid components were migrated to context, associated components (Menu.Item, List.Item, Grid.Col, etc.) can now be wrapper with other components and fragments
• useLocalStorageValue hook was renamed to useLocalStorage (old hook is still exported from @mantine/hooks)
• AppShell no longer parses props of Navbar and Header components, AppShell positioning logic was migrated to context and CSS variables, Navbar and Header components can now be wrapped with other components
• NextLink component was added to @mantine/next package to simplify Next.js Link usage with Menu
• Global component now supports array syntax for styles