Version 2.0.0

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

• @mantine/core package now exports GlobalStyles and NormalizeCSS components to include global styles
• New Styles API allows you to style any part of Mantine components with inline styles or classes

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:

Capture dates range input with RangeCalendar component:

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:

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

• use-did-update – useEffect replacement when you do not want hook to be called on mount
• use-isomorphic-effect – switch between useEffect during server side rendering and useLayoutEffect after hydration
• use-force-update – force component to rerender
• use-toggle – switch state between two values
• use-uncontrolled – manage state for both controlled and uncontrolled components
• use-window-scroll – get current scroll position and handler to scroll to given position

New @mantine/core components

Accordion component:

Bender Bending Rodríguez

Fascinated with cooking, though has no sense of taste

Bender Bending Rodríguez, (born September 4, 2996), designated Bending Unit 22, and commonly known as Bender, is a bending unit created by a division of MomCorp in Tijuana, Mexico, and his serial number is 2716057. His mugshot id number is 01473. He is Fry's best friend.

Carol Miller

One of the richest people on Earth

Carol Miller (born January 30, 2880), better known as Mom, is the evil chief executive officer and shareholder of 99.7% of Momcorp, one of the largest industrial conglomerates in the universe and the source of most of Earth's robots. She is also one of the main antagonists of the Futurama series.

Homer Simpson

Overweight, lazy, and often ignorant

Homer Jay Simpson (born May 12) is the main protagonist and one of the five main characters of The Simpsons series(or show). He is the spouse of Marge Simpson and father of Bart, Lisa and Maggie Simpson.

Select component:

Autocomplete component:

JsonInput component:

Slider and RangeSlider components:

import { Slider } from '@mantine/core';

function Demo() {
  return (
    <Slider
      marks={[
        { value: 20, label: '20%' },
        { value: 50, label: '50%' },
        { value: 80, label: '80%' },
      ]}
    />
  );
}

Affix components:

@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