Version 3.2.0

Source code

Release date

November 19th, 2021

Breaking changes

Group component was migrated to flexbox gap, it no longer uses hack with negative margins, thus withGutter prop is not longer supported.
Button component no longer supports link variant due to Styles API limitations, use Anchor component instead.
@mantine/core package no longer exports getFontStyles, getFocusStyles and hexToRgba functions, replace them with theme functions: theme.fn.fontStyles(), theme.fn.focusStyles(), theme.fn.rgba().
AppShell component was migrated to mobile-first approach, the way Navbar width is set was changed
use-idle hook options were changed to support initial state

Normalize.css and global styles on MantineProvider

MantineProvider now supports adding global styles and normalize.css with props:

<MantineProvider withGlobalStyles withNormalizeCSS>
  <App />
</MantineProvider>

Functions on theme

Mantine theme now adds several functions (full list) that can help you write styles in createStyles function, styles and sx props:

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

const useStyles = createStyles((theme) => ({
  myResponsiveText: {
    fontSize: theme.fontSizes.md,

    [theme.fn.smallerThan('sm')]: {
      fontSize: theme.fontSizes.sm,
    },

    [theme.fn.smallerThan(500)]: {
      fontSize: theme.fontSizes.xs,
    },
  },
}));

function MyResponsiveText() {
  const { classes } = useStyles();
  return <div className={classes.myResponsiveText}>My responsive text</div>;
}

Custom properties on theme

You can now add any amount of custom properties on Mantine theme using other key:

// Add any other properties on theme
<MantineProvider
  theme={{
    other: {
      fontFamilySecondary: 'Arial',
      lineHeights: [1.2, 1.4, 1.6, 1.8, 1.95],
      reduceMotion: true,
    },
  }}
>
  <App />
</MantineProvider>

// Then use your custom properties
<Box sx={(theme) => ({
  fontFamily: theme.other.fontFamilySecondary,
  lineHeight: theme.other.lineHeight[2],
  transitionDuration: theme.other.reduceMotion ? '0ms' : '200ms',
})} />

Mobile first approach

All layout components now support mobile first approach:

SimpleGrid component now supports minWidth breakpoints (cols prop is no longer required):

<SimpleGrid
  breakpoints={[
    { minWidth: 'sm', cols: 2 },
    { minWidth: 'md', cols: 3 },
    { minWidth: 1200, cols: 4 },
  ]}
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</SimpleGrid>

AppShell component was migrated to use mobile first approach (breaking change) – you will need to change how Navbar width is set:

// old way
<Navbar width={{ base: 400, breakpoints: { sm: '100%', lg: 500 } }} />

// new way (mobile first), base width defaults to 100%
<Navbar width={{ sm: 400, lg: 500 }} />

New @mantine/modals package

New @mantine/modals package is similar to @mantine/notification but for modals. It includes modals manager that allows you to:

create shared modals context storage
show confirm modals
handle multiple modals layers

import { Button, Text } from '@mantine/core';
import { useModals } from '@mantine/modals';

function Demo() {
  const modals = useModals();

  const openDeleteModal = () =>
    modals.openConfirmModal({
      title: 'Delete your profile',
      centered: true,
      children: (
        <Text size="sm">
          Are you sure you want to delete your profile? This action is destructive and you will have
          to contact support to restore your data.
        </Text>
      ),
      labels: { confirm: 'Delete account', cancel: "No don't delete it" },
      confirmProps: { color: 'red' },
      onCancel: () => console.log('Cancel'),
      onConfirm: () => console.log('Confirmed'),
    });

  return <Button onClick={openDeleteModal} color="red">Delete account</Button>;
}

New components and hooks

New Stepper component:

Step 2 content: Verify email

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

function Demo() {
  const [active, setActive] = useState(1);
  const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));

  return (
    <>
      <Stepper active={active} onStepClick={setActive} breakpoint="sm">
        <Stepper.Step label="Fist step" description="Create an account">
          Step 1 content: Create an account
        </Stepper.Step>
        <Stepper.Step label="Second step" description="Verify email">
          Step 2 content: Verify email
        </Stepper.Step>
        <Stepper.Step label="Final step" description="Get full access">
          Step 3 content: Get full access
        </Stepper.Step>
        <Stepper.Completed>
          Completed, click back button to get to previous step
        </Stepper.Completed>
      </Stepper>

      <Group position="center" mt="xl">
        <Button variant="default" onClick={prevStep}>Back</Button>
        <Button onClick={nextStep}>Next step</Button>
      </Group>
    </>
  );
}

New TransferList component:

import { useState } from 'react';
import { TransferList, TransferListData } from '@mantine/core';

const initialValues: TransferListData = [
  [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'next', label: 'Next.js' },
    { value: 'blitz', label: 'Blitz.js' },
    { value: 'gatsby', label: 'Gatsby.js' },
    { value: 'vue', label: 'Vue' },
    { value: 'jq', label: 'jQuery' },
  ],
  [
    { value: 'sv', label: 'Svelte' },
    { value: 'rw', label: 'Redwood' },
    { value: 'np', label: 'NumPy' },
    { value: 'dj', label: 'Django' },
    { value: 'fl', label: 'Flask' },
  ],
];

function Demo() {
  const [data, setData] = useState<TransferListData>(initialValues);
  return (
    <TransferList
      value={data}
      onChange={setData}
      searchPlaceholder="Search..."
      nothingFound="Nothing here"
      titles={['Frameworks', 'Libraries']}
      breakpoint="sm"
    />
  );
}

With new use-os hook you can detect user os:

Your os is undetermined

import { useOs } from '@mantine/hooks';

function Demo() {
  const os = useOs();
  return <>Your os is <b>{os}</b></>;
}

New use-set-state lets you work with state like in class components:

const [state, setState] = useSetState({ name: 'John', age: 35, job: 'Engineer' });

state; // -> { name: 'John', age: 35, job: 'Engineer' }

setState({ name: 'Jane' }); // -> { name: 'Jane', age: 35, job: 'Engineer' }
setState({ age: 25, job: 'Manager' }); // -> { name: 'Jane', age: 25, job: 'Manager' }
setState((current) => ({ age: current.age + 7 })); // -> { name: 'Jane', age: 32, job: 'Manager' }

New features

DatePicker component now supports free input:

Event date *

<DatePicker placeholder="Pick date" label="Event date" required allowFreeInput />

DatePicker, DateRangePicker, Calendar and RangeCalendar components now support multiple months rendering:

2 months

3 months

<DateRangePicker amountOfMonths={2} label="2 months" />
<DateRangePicker amountOfMonths={3} label="3 months" />

MultiSelect component now supports limiting maximum selected values:

Pick 3 values or less

<MultiSelect maxSelectedValues={3} />

PasswordInput component now supports visibility toggle icon changing:

Change visibility toggle icon

import { PasswordInput } from '@mantine/core';
import { EyeCheck, EyeOff } from 'tabler-icons-react';

function Demo() {
  return (
    <PasswordInput
      label="Change visibility toggle icon"
      placeholder="Change visibility toggle icon"
      defaultValue="secret"
      visibilityToggleIcon={({ reveal, size }) =>
        reveal ? <EyeOff size={size} /> : <EyeCheck size={size} />
      }
    />
  );
}

Other changes

3 new guides were added: RTL Support, sx prop and Responsive styles
All date picking components from @mantine/dates package now support first day of week customization (either sunday or monday)
Tabs component pills variant was redesigned to be more neutral
Button and ActionIcon component now have hover effects
SegmentedControl component is now a generic – it accepts values as single type argument
Autocomplete, Select and MultiSelect dropdowns are now rendered within Popper. This means that dropdown element is now aware of its position on screen and will change placement based on container scroll position. You should also experience less issues with z-index configuration.
Col component now supports responsive offset props: offsetXs={5}, offsetMd={10}, etc.
NumberInput component now supports empty value
You can now set default date format on MantineProvider, it will be used to format DatePicker and DateRangePicker inputs values
Checkbox component now supports default icons replacement
use-list-state hook now supports pop and shift handlers
use-idle hook now supports setting initial state
use-merged-ref hook now exports mergeRefs function, it supports refs merging for dynamic lists
use-focus-return hook now includes an option to disable automatic focus return and returns a function that can be used to return focus
use-move hook now supports onScrubStart and onScrubEnd callbacks

Go back

Version 3.1.0 – Changelog

Up next

Version 3.3.0 – Changelog

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

Feedback

Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good

Leave feedback

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter