Version 2.3.0

Release date

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:

New components

ColorPicker – inline color picker, includes Hue and Alpha sliders exports

rgba(47, 119, 150, 0.7)

ColorInput – input with color picker, supports hex, rgba and hsla color formats

Popper – wrapper component to work with popper.js

Placement
import { useState } from 'react';
import { Popper, Button, Paper, Center, Group, useMantineTheme } from '@mantine/core';
function Demo() {
const [referenceElement, setReferenceElement] = useState(null);
const [visible, setVisible] = useState(true);
const theme = useMantineTheme();
return (
<Group position="center">
<Button ref={setReferenceElement} onClick={() => setVisible((m) => !m)}>
Reference element
</Button>
<Popper
arrowSize={5}
withArrow
mounted={visible}
referenceElement={referenceElement}
transition="pop-top-left"
transitionDuration={200}
arrowStyle={{
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
}}
>
<Paper
style={{
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
}}
>
<Center style={{ height: 100, width: 200 }}>Popper content</Center>
</Paper>
</Popper>
</Group>
);
}

Other changes

  • Group component now support withGutter prop to add spacing to all sides of group
  • 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
Build fully functional accessible web applications faster than ever
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