New features and components

SegmentedControl component:

Popover component:

Divider component now supports labels and margins:

Group component now supports vertical orientation:

Spacing
xs
sm
md
lg
xl
import { Group, Button } from '@mantine/core';
function Demo() {
return (
<Group>
<Button variant="outline">1</Button>
<Button variant="outline">2</Button>
<Button variant="outline">3</Button>
</Group>
);
}

Grid component allows you to use flexbox grid with any columns count:

1
2
3
4
5
Gutter
xs
sm
md
lg
xl
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid grow>
<Grid.Col span={4}>1</Grid.Col>
<Grid.Col span={4}>2</Grid.Col>
<Grid.Col span={4}>3</Grid.Col>
<Grid.Col span={4}>4</Grid.Col>
<Grid.Col span={4}>5</Grid.Col>
</Grid>
);
}

use-debounced-value - hook to debounce value with useEffect:

Value: [empty string]
Debounced value: [empty string]
import { useState } from 'react';
import { useDebouncedValue } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';
function Demo() {
const [value, setValue] = useState('');
const [debounced] = useDebouncedValue(value, 200);
return (
<>
<TextInput
label="Enter value to see debounce"
value={value}
style={{ flex: 1 }}
onChange={(event) => setValue(event.currentTarget.value)}
/>
<Text>Value: {value}</Text>
<Text>Debounced value: {debounced}</Text>
</>
);
}

API changes

  • Prop typo fix in Checkbox component (intermediate -> indeterminate)
  • Hr component replaced with Divider to support more options
  • ElementsGroup component replaced with Group to support all elements positioning
  • Custom component is now supported by ActionIcon and MenuItem components
  • Modal and Drawer components are wrapped with Portal by default
  • LoadingOverlay now supports custom loaders
  • @mantine/core components types are now exported from package, import it with Props suffix: import { ButtonProps } from '@mantine/core'

Bug fixes and improvements

  • Significant performance improvements with react-jss parameters memoization
  • Dark theme improvements, all components now use more balanced transparent colors in dark theme
  • Portal component now does not show warning during server side rendering
  • @mantine/notifications – useNotifications hook now returns queue