New components, hooks and features

New RingProgress component – display circular progress with multiple sections:

Application data usage

Badge component now supports new dot variant:

dark
gray
red
pink
grape
violet
indigo
blue
cyan
teal
green
lime
yellow
orange

NumberInput component now exposes increment/decrement handlers via ref:

New Center component – simple wrapper to center element horizontally and vertically:

All elements inside Center are centered

New use-interval hook provides simple wrapper around window.setInterval:

Page loaded 0 seconds ago

Other changes

  • Tabs component now support outline variant
  • New documentation design with tabs and less cluttered packages index pages
  • All packages are now published in 3 formats: esm (ECMAScript modules export { Button } from './Button';), cjs (commonjs export.Button = Button;) and umd (default for browser). These changes will allow webpack and similar bundlers to perform better tree shacking.
  • All components now export related types: import { ButtonProps } from '@mantine/core';
  • use-focus-trap hook now allows to change element that will initially receive focus

Design changes

  • Button component label is no longer uppercased by default, to replicate old design use <Button uppercase />
  • Colors saturation and text shadows adjusted for Button and Badge components for better contrast