Version 2.0.0

Release date

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

New @mantine/dates package

@mantine/dates s a new package that includes date pickers and calendars, it includes components:

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:

November 2021
Mo
Tu
We
Th
Fr
Sa
Su

Capture dates range input with RangeCalendar component:

November 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

New @mantine/prism package

New @mantine/prism package exports Prism component that allows you to highlight code with prism-react-renderer and your theme colors just like in Mantine docs.

New @mantine/hooks hooks

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 component: scale-y, scale-x and scale
  • @mantine/core now exports new UnstyledButton component that can be used to create custom buttons
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