Version 1.3.0

Release date

New components, hooks and features

New RingProgress component – display circular progress with multiple sections:

Application data usage

Tabs component now support outline variant:

First tab content

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

  • 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
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