3.0.0 ✨

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

2.5.1

• 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)

2.5.0

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

2.4.3

Fix ColorPicker and ColorInput losing hue value when color changes

2.4.2

• 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

2.4.1

• Fix Loader not being visible in LoadingOverlay component
• Add more docs about responsive Grid styles
• Add option to set default loader via theme context

// Loader component will render bars
<MantineProvider theme={{ loader: 'bars' }}>
  <YourApp />
</MantineProvider>

2.4.0

Release demos

View all demos on Mantine website

Components redesign

Alert component was redesigned, it now supports icon and close button:

Blockquote component was redesigned to look more neutral:

New components

SimpleGrid component allows you to create responsive grid with equal width columns:

<SimpleGrid cols={3}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</SimpleGrid>

Collapse component allows you to animate presence with slide down transition

import { useState } from 'react';
import { Button, Collapse } from '@mantine/core';

function Demo() {
  const [opened, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen((o) => !o)}>
        Toggle content
      </Button>

      <Collapse in={opened}>
        {/* content... */}
      </Collapse>
    </>
  );
}

New features

• Grid component now supports setting breakpoints via Col component props (built by @Everek):

import React from 'react';
import { Grid, Col } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Col span={12} md={6} lg={3}>1</Col>
      <Col span={12} md={6} lg={3}>2</Col>
      <Col span={12} md={6} lg={3}>3</Col>
      <Col span={12} md={6} lg={3}>4</Col>
    </Grid>
  );
}

• Text, Button, Badge and ThemeIcon components now support new gradient variant:

• Button component now supports loading state
• Text component now supports setting -webkit-line-clampvia prop to limit amount of lines
• Center component now supports inline prop to center inline elements
• Initial highlighted item in Menu component no longer set on menu open – user will have to use up or down arrow at least one to make selection visible
• Card, Paper and Avatar components now support setting custom component as root element via component prop
• Text component now supports special dimmed color and inline prop to set line-height to 1
• Select, Autocomplete and MultiSelect dropdowns are closed when input is clicked (built by @achmurali)
• Components that support changing root element with component prop (Button, ActionIcon, etc.) now have better TypeScript support
• Loader component now supports 2 new variants
• Select component now supports onSearchChange event which allows to change data based on search query
• Indeterminate and checked icons were replaced in Checkbox to make component more recognizable
• Menu, Accordion and Card components now support simpler imports, e.g. <Menu.Item /> instead of separate <MenuItem /> import
• NativeSelect, Select and MultiSelect components now support icon in right section changing
• Modal and Drawer components now return focus to last active element after being closed
• Overlay component now supports setting gradient instead of background color

Project changes

• Mantine website has now better search built with Autocomplete component (built by @achmurali)
• Changelog entries are now organized by versions instead of single page

2.3.2

Fix ColorInput behavior when used inside Modal and Drawer (#222)

2.3.1

• Fix incorrect closeOnItemClick prop handling in Menu component #213
• Fix Select, MultiSelect and Autocomplete dropdown behavior within Modal – now modal does not close when item is selected from dropdown #209
• Fix DatePicker and DateRangePicker overlay within Modal and Drawer #211
• Fix up and down arrows not firing change event #208
• Fix unintended closing of Menu, Popover, DatePicker and DateRangePicker dropdown within Modal and Drawer

2.3.0

View release demos

New dark theme

Dark theme colors were adjusted in all components to have better contrast, overall all theme.colors.dark colors are darker now.

Popper.js integration

Components that use any kind of overlay are now powered by popper.js. Full list of components that were migrated:

• Menu
• Tooltip
• Popover
• DatePicker
• DateRangePicker

New components

• ColorPicker – inline color picker, includes Hue and Alpha sliders exports
• ColorInput – input with color picker, supports hex, rgba and hsla color formats
• Popper – wrapper component to work with popper.js

Other changes

• Group component now support withGutter prop to add spacing to all sides of group (built by @achmurali)
• use-click-outside now has an API to handle multiple nodes
• Transition component was migrated to native implementation – it does not depend on react-transition-group any more (#93)
• ColorSwatch component now supports transparent colors and has better contrast for light colors
• GlobalStyles component now sets box-sizing: border-box on all elements
• Dropdown styles of Select, MultiSelect and Autocomplete components were adjusted to match other components design
• Slider component has new thumb styles