Version 1.1.0

Release date

New features and components

SegmentedControl component:

Popover component:

BH
Bob Handsome
bob@handsome.inc

Divider component now supports labels and margins:

Label on the left
Label in the center
Label on the right
Search results

Group component now supports vertical orientation:

Direction
Spacing
xs
sm
md
lg
xl
<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
<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]

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