Version 2.2.0

Release date

New components and hooks

New MultiSelect component allows you to create searchable select with option to customize labels and options:

use-idle hook allows to detect if user does nothing:

Current state: idle

use-fullscreenuse-fullscreen hook allows to work with Fullscreen API:

New use-move hook handles move behavior over any element, you can use it to build custom sliders, color pickers, etc.:

Values { x: 20, y: 60 }

Other changes

  • Menu and RadioGroup components now works differently with Styles API – all styles and classNames should be added to root Menu/RadioGroup component instead of MenuItem/Radio
  • Card component no longer has context styles for images and dividers, use new CardSection component instead
  • @mantine/tag-picker package is deprecated – use MultiSelect instead
  • You can now customize shadow and padding in Modal component
  • Button now supports compact option which reduces its height and horizontal padding
  • Image now supports adding figcaption
  • New Mark component – mark tag with theme styles
  • Menu component now supports labels in menu body and behavior customization (focus trap and close on scroll)
  • 4 new premade pop-* transitions were added to Transition component
  • New use-logger hook will log given values each time component renders
  • Select, NativeSelect and Autocomplete components now support data as an array of strings
  • New use-shallow-effect hook – a drop in replacement for useEffect with shallow comparison instead of referential
  • use-scroll-lock hook now support state managing inside hook
Build fully functional accessible web applications faster than ever
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