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

2.2.1

• Add multiline handling to unstyled Input variant
• Fix incorrect MultiSelect styles applied with unstyled variant

2.2.0

View release demos

New hooks and components

• MultiSelect component allows you to create searchable select with option to customize labels and options
• Mark component – mark tag with theme styles
• use-move hook handles move behavior over any element, you can use it to build custom sliders, color pickers, etc.
• use-fullscreen hook allows to work with Fullscreen API (built by @yoroshikun)
• use-idle hook allows to detect if user does nothing on the page (built by @achmurali)
• use-shallow-effect hook – a drop in replacement for useEffect with shallow comparison instead of referential (built by @achmurali)
• use-logger hook will log given values each time component renders (built by @yoroshikun)

Other changes

• use-scroll-lock hook now support state managing inside hook (built by @yoroshikun)
• Select, NativeSelect and Autocomplete components now support data as an array of strings, e.g., ['React', 'Angular', 'Vue'] (built by @cstrat)
• Menu component now has new design and animations, support for labels in menu body and behavior customization (focus trap and close on scroll)
• Button component now supports compact prop – it reduces height and horizontal padding if applied
• Modal component now supports shadow and padding customization via props
• Card component now has better spacing API with CardSection component instead of context styles for images and dividers
• Menu and RadioGroup components now works differently with Styles API – all styles and classNames should be added to root Menu/RadioGroup component instead of MenuItem/Radio
• @mantine/tag-picker package is deprecated in favor of Select and MultiSelect
• 4 new premade pop-* transitions were added to Transition component

2.1.5

Fix Popover and Tooltip components z-index during transitions #188