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