mantine

• Fix Loader not being visible in LoadingOverlay component
• Add more docs about responsive Grid styles
• Add option to set default loader via theme context

// Loader component will render bars
<MantineProvider theme={{ loader: 'bars' }}>
  <YourApp />
</MantineProvider>

Release demos

View all demos on Mantine website

Components redesign

Alert component was redesigned, it now supports icon and close button:

Blockquote component was redesigned to look more neutral:

New components

SimpleGrid component allows you to create responsive grid with equal width columns:

<SimpleGrid cols={3}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</SimpleGrid>

Collapse component allows you to animate presence with slide down transition

import { useState } from 'react';
import { Button, Collapse } from '@mantine/core';

function Demo() {
  const [opened, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen((o) => !o)}>
        Toggle content
      </Button>

      <Collapse in={opened}>
        {/* content... */}
      </Collapse>
    </>
  );
}

New features

• Grid component now supports setting breakpoints via Col component props (built by @everek):

import React from 'react';
import { Grid, Col } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Col span={12} md={6} lg={3}>1</Col>
      <Col span={12} md={6} lg={3}>2</Col>
      <Col span={12} md={6} lg={3}>3</Col>
      <Col span={12} md={6} lg={3}>4</Col>
    </Grid>
  );
}

• Text, Button, Badge and ThemeIcon components now support new gradient variant:

• Button component now supports loading state
• Text component now supports setting -webkit-line-clampvia prop to limit amount of lines
• Center component now supports inline prop to center inline elements
• Initial highlighted item in Menu component no longer set on menu open – user will have to use up or down arrow at least one to make selection visible
• Card, Paper and Avatar components now support setting custom component as root element via component prop
• Text component now supports special dimmed color and inline prop to set line-height to 1
• Select, Autocomplete and MultiSelect dropdowns are closed when input is clicked (built by @achmurali)
• Components that support changing root element with component prop (Button, ActionIcon, etc.) now have better TypeScript support
• Loader component now supports 2 new variants
• Select component now supports onSearchChange event which allows to change data based on search query
• Indeterminate and checked icons were replaced in Checkbox to make component more recognizable
• Menu, Accordion and Card components now support simpler imports, e.g. <Menu.Item /> instead of separate <MenuItem /> import
• NativeSelect, Select and MultiSelect components now support icon in right section changing
• Modal and Drawer components now return focus to last active element after being closed
• Overlay component now supports setting gradient instead of background color

Project changes

• Mantine website has now better search built with Autocomplete component (built by @achmurali)
• Changelog entries are now organized by versions instead of single page

Fix ColorInput behavior when used inside Modal and Drawer (#222)

• Fix incorrect closeOnItemClick prop handling in Menu component #213
• Fix Select, MultiSelect and Autocomplete dropdown behavior within Modal – now modal does not close when item is selected from dropdown #209
• Fix DatePicker and DateRangePicker overlay within Modal and Drawer #211
• Fix up and down arrows not firing change event #208
• Fix unintended closing of Menu, Popover, DatePicker and DateRangePicker dropdown within Modal and Drawer

View release demos

New dark theme

Dark theme colors were adjusted in all components to have better contrast, overall all theme.colors.dark colors are darker now.

Popper.js integration

Components that use any kind of overlay are now powered by popper.js. Full list of components that were migrated:

• Menu
• Tooltip
• Popover
• DatePicker
• DateRangePicker

New components

• ColorPicker – inline color picker, includes Hue and Alpha sliders exports
• ColorInput – input with color picker, supports hex, rgba and hsla color formats
• Popper – wrapper component to work with popper.js

Other changes

• Group component now support withGutter prop to add spacing to all sides of group (built by @achmurali)
• use-click-outside now has an API to handle multiple nodes
• Transition component was migrated to native implementation – it does not depend on react-transition-group any more (#93)
• ColorSwatch component now supports transparent colors and has better contrast for light colors
• GlobalStyles component now sets box-sizing: border-box on all elements
• Dropdown styles of Select, MultiSelect and Autocomplete components were adjusted to match other components design
• Slider component has new thumb styles

Fix definitions for Title component #207

Fix incorrect jss rule in Progress component #205

• Add multiline handling to unstyled Input variant
• Fix incorrect MultiSelect styles applied with unstyled variant

View release demos

New hooks and components

• MultiSelect component allows you to create searchable select with option to customize labels and options
• Mark component – mark tag with theme styles
• use-move hook handles move behavior over any element, you can use it to build custom sliders, color pickers, etc.
• use-fullscreen hook allows to work with Fullscreen API (built by @yoroshikun)
• use-idle hook allows to detect if user does nothing on the page (built by @achmurali)
• use-shallow-effect hook – a drop in replacement for useEffect with shallow comparison instead of referential (built by @achmurali)
• use-logger hook will log given values each time component renders (built by @yoroshikun)

Other changes

• use-scroll-lock hook now support state managing inside hook (built by @yoroshikun)
• Select, NativeSelect and Autocomplete components now support data as an array of strings, e.g., ['React', 'Angular', 'Vue'] (built by @cstrat)
• Menu component now has new design and animations, support for labels in menu body and behavior customization (focus trap and close on scroll)
• Button component now supports compact prop – it reduces height and horizontal padding if applied
• Modal component now supports shadow and padding customization via props
• Card component now has better spacing API with CardSection component instead of context styles for images and dividers
• 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
• @mantine/tag-picker package is deprecated in favor of Select and MultiSelect
• 4 new premade pop-* transitions were added to Transition component

Fix Popover and Tooltip components z-index during transitions #188

Fix TypeScript definitions to work with strict mode (strict null checks) in following hooks:

• use-uncontrolled
• use-intersection
• use-hash
• use-focus-trap

• Fix incorrect styles applied to Input component during validation
• Fix user-select property on Input placeholder

• Add clearable option support to DatePicker and DateRangePicker components
• Fix incorrect className passthrough in DatePicker and DateRangePicker components
• Add more correct way of handling grow prop in Group component – now when grow prop set to true items will always take equal amount of space and will never wrap to next line

• Fix preact guide to work with new preact-cli #142
• Fix issue when month cannot be changed after value was selected in DatePicker and DateRangePicker components
• Fix peer dependencies warnings for normalize-jss during @mantine/core installation

This release is almost fully built by Mantine community, lots of thanks for these awesome people who contributed these features!

use-hotkeys hook

Built by @steschwa

use-hotkeys hook allows you to subscribe to multiple hotkeys with single hook (document element) or function (any other element)

import { useHotkeys } from '@mantine/hooks';

function Demo() {
  // ctrl + J and ⌘ + J to toggle color scheme
  // ctrl + K and ⌘ + K to search
  useHotkeys([
    ['mod+J', () => toggleColorScheme()],
    ['ctrl+K', () => search()],
    ['alt+mod+shift+X', () => rickRoll()],
  ]);

  return null;
}

use-intersection

Built by @kosciolek

use-intersection hook allows you to get information about intersection of given element with its scroll container or document.body

import { useIntersection } from '@mantine/hooks';
import { Paper, Text, useMantineTheme } from '@mantine/core';

function Demo() {
  const containerRef = useRef();
  const theme = useMantineTheme();
  const [ref, observer] = useIntersection({
    root: containerRef.current,
    threshold: 1,
  });

  return (
    <Paper elementRef={containerRef} style={{ overflowY: 'scroll', height: 300 }}>
      <div style={{ paddingTop: 260, paddingBottom: 280 }}>
        <Paper
          elementRef={ref}
          padding="xl"
          style={{
            backgroundColor: observer?.isIntersecting ? theme.colors.green[9] : theme.colors.red[9],
            minWidth: '50%',
          }}
        >
          <Text style={{ color: theme.white }} weight={700}>
            {observer?.isIntersecting ? 'Fully visible' : 'Obscured'}
          </Text>
        </Paper>
      </div>
    </Paper>
  );
}

use-hash

Built by @ghana7989

Get and set hash in url with use-hash hook:

import { useHash, randomId } from '@mantine/hooks';
import { Button } from '@mantine/core';

export function Demo() {
  const [hash, setHash] = useHash();
  return <Button onClick={() => setHash(randomId())}>Set hash to random string</Button>
}

Highlight component multiple substrings support

Built by @yoroshikun

Highlight component now supports:

• multiple substrings highlight
• highlighting of the same string multiple times

// Highlight all 3 "this" substrings
<Highlight highlight="this">Highlight This, definitely THIS and also this!</Highlight>

// Highlights both "this" and "that" substrings
<Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>

Tabs vertical orientation

Built by @wyze

Tabs component now supports vertical orientation:

Other changes and bug fixes

• Documentation now has search for quick props filters (built by @ghana7989)
• Input and all other components that use it (Select, Textarea, TextInput, Autocomplete, etc.) now supports headless variant without Mantine styles to help you create your own custom input styles with Styles API
• Checkbox component now supports animations
• Fixed bug in Select and Autocomplete components which made focus to shift to body element when inputs were blurred
• Fixed incorrect Slider marks background color

Fix Grid columns collapsing to next row when column has overflow content and grow option set to false

Value can no longer be changed in internal state of controlled components built with use-uncontrolled hook #157 (thanks to @Kukkimonsuta for reporting and fixing the issue)

• Fixes #151 – jss warning for incorrect input placeholder syntax
• Docs now scroll navigation into view on mount #147 (thanks to @ghana7989 for perfect docs navigation UX)

• Fix selectors specificity issue in Input component, now classes provided via classNames will override default styles correctly in all inputs
• Add option to limit amount of items rendered in searchable Select at a time, this change will enable usage of select with large data sets without stuttering

• Fix dropdown closing when scrollbars were used to scroll inside Select body
• Fix incorrect logic in Autocomplete when input value fully matched with item from dropdown
• New @mantine/eslint-config package is published with Mantine ESLint and Prettier configuration