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

2.2.3

Fix definitions for Title component #207

2.2.2

Fix incorrect jss rule in Progress component #205