K

Changelog

2.1.0 – August 2021

New hooks and components

New use-hotkeys hook allows you to subscribe to multiple hotkeys with single hook (document element) or function (any other element):

New use-intersection hook allows you to get information about intersection of given element with its scroll container or document.body:

Obscured

Get and set hash in url with new use-hash hook:

Other new features

  • Highlight component now supports multiple substrings highlight and highlighting of the same string multiple times
  • Tabs component now supports vertical orientation
  • Input and all other components that use it (Select, Textarea, TextInput, Autocomplete, etc.) now supports headless variant without Mantine styles to help you create your own custom input styles with Styles API

2.0.0 – July 2021

Breaking changes

  • All inputs no longer support inputStyle and inputClassName props, this feature was replaced by Styles API
  • Burger component no longer uses colors from theme, use hex color value instead
  • Select component was renamed to NativeSelect
  • ElementsGroup, Hr and CardsGrid components are replaced and no longer exported from @mantine/core package
  • All inputs variant is set by default to filled in dark theme

New theming options

import { createUseStyles } from 'react-jss';
import { theming, Tabs, Tab } from '@mantine/core';
const useStyles = createUseStyles(
(theme) => ({
tabControl: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],
border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[4]
}`,
fontSize: theme.fontSizes.md,
padding: [theme.spacing.lg, theme.spacing.xl],
'& + &': {
borderLeft: 0,
},
'&:first-of-type': {
borderTopLeftRadius: theme.radius.md,
borderBottomLeftRadius: theme.radius.md,
},
'&:last-of-type': {
borderTopRightRadius: theme.radius.md,
borderBottomRightRadius: theme.radius.md,
},
},
tabActive: {
backgroundColor: theme.colors.blue[7],
borderColor: theme.colors.blue[7],
color: theme.white,
},
}),
{ theming }
);
function StyledTabs(props: TabsProps) {
const classes = useStyles();
return <Tabs variant="unstyled" classNames={classes} {...props} />;
}
function Demo() {
return (
<StyledTabs>
<Tab label="Settings" icon={<GearIcon width={16} height={16} />} />
<Tab label="Messages" icon={<ChatBubbleIcon width={16} height={16} />} />
<Tab label="Gallery" icon={<ImageIcon width={16} height={16} />} />
</StyledTabs>
);
}

@mantine/dates package

@mantine/dates is a new package that includes date pickers and calendars:

DatePicker allows you to capture dates without free user input. Component supports the same props as any other input from @mantine/core library and can be used in forms:
DateRangePicker allows you to capture dates range from user:
TimeInput component allows to capture time input from user:
:
Calendar component allows you to capture date input fom user or display events:
July 2021
Mo
Tu
We
Th
Fr
Sa
Su

Capture dates range input with RangeCalendar component:

July 2021
Mo
Tu
We
Th
Fr
Sa
Su
Month component displays given month, it is the most basic component which is used in all other components. You can use it to create your own date pickers and calendars if Mantine components do not fit your requirements:
Mo
Tu
We
Th
Fr
Sa
Su

@mantine/prism package

@mantine/prism is a new package that allows you to highlight code with your theme colors just like in Mantine docs:
import React from 'react';
import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}

New @mantine/core components

Accordion component:
Bob is a graphic designer from San Francisco, as stands from his surname, he is a handsome man
Bill works as integrations engineer in a large company. Does something tell you that he likes snakes?
Emily is a DevOps engineer at small regional company called Rob Johnson and sons
Select component:
Autocomplete component:
JsonInput component:
Slider and RangeSlider components:
20%
50%
80%
Type
Color
Size
Radius
<Slider
marks={[
{ value: 20, label: '20%' },
{ value: 50, label: '50%' },
{ value: 80, label: '80%' },
]}
/>
Affix components:
Affix is located at the bottom of the screen, scroll to see it

@mantine/core changes

  • Tabs component now supports unstyled and pills variants
  • All inputs now support size prop
  • Drawer component now support title and close button
  • Tooltip component now displays tooltip on focus by default
  • Menu component now closes on scroll to prevent incorrect focus handling
  • Menu component now supports hover trigger
  • 3 new premade transitions were added to Transition: scale-y, scale-x and scale
  • @mantine/core now exports new UnstyledButton component that can be used to create custom buttons

New @mantine/hooks hooks

1.3.0 – June 2021

New components and features

RingProgress component displays simple circle diagrams:
Application data usage
Tabs component now supports outline variant:
First tab content
Badge component now supports dot variant:
dark
gray
red
pink
grape
violet
indigo
blue
cyan
teal
green
lime
yellow
orange
NumberInput component now exposes increment/decrement handlers and supports custom controls:
Center centers content vertically and horizontally:
All elements inside Center are centered

New use-interval hook:

Page loaded 0 seconds ago

Other changes

  • Mantine packages are now published with commonjs and es modules – this enables better tree shaking
  • All components props types are now exported from @mantine/core package, you can import it by adding Props to component name:
import { ButtonProps } from '@mantine/core';

1.1.0 – May 2021

New components and features

SegmentedControl component is an alternative to Tabs and RadioGroup:
Popover component allows you to display popover section relative to given target element. Use it to render forms, complex tooltips, etc.
BH
Bob Handsome
bob@handsome.inc
Divider component now supports labels, vertical orientation and margins:
Label on the left
Label in the center
Label on the right
Search results
Group component now supports vertical orientation:
Direction
Spacing
<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
<Grid grow>
<Col span={4}>1</Col>
<Col span={4}>2</Col>
<Col span={4}>3</Col>
<Col span={4}>4</Col>
<Col span={4}>5</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

Other changes

  • Significant performance improvements with react-jss useStyles props memoization
  • Dark theme improvements, all components now use more balanced transparent colors in dark theme
Build fully functional accessible web applications with ease
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