Version 5.9.0

Source code

Release date

December 1st, 2022

use-eye-dropper hook

New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

EyeDropper API is not supported in your browser

import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@mantine/core';
import { IconColorPicker } from '@tabler/icons';
import { useEyeDropper } from '@mantine/hooks';

function Demo() {
  const [color, setColor] = useState('');
  const [error, setError] = useState(null);
  const { supported, open } = useEyeDropper();

  const pickColor = async () => {
    try {
      const { sRGBHex } = await open();
      setColor(sRGBHex);
    } catch (e) {
      setError(e);
    }
  };

  if (!supported) {
    return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
  }

  return (
    <Group>
      <ActionIcon variant="default" onClick={pickColor}>
        <IconColorPicker size={16} stroke={1.5} />
      </ActionIcon>
      {color ? (
        <Group spacing="xs">
          <ColorSwatch color={color} />
          <Text>Picked color: {color}</Text>
        </Group>
      ) : (
        <Text>Click the button to pick color</Text>
      )}
      {error && <Text color="red">Error: {error?.message}</Text>}
    </Group>
  );
}

ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

Pick any color from the page

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

function Demo() {
  return (
    <ColorInput
      withEyeDropper
      placeholder="With eye dropper"
      label="Pick any color from the page"
    />
  );
}

AppShell alt layout

AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

Open alt layout example in new tab

Responsive Grid gutter

Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

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

function Demo() {
  return (
    <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
    </Grid>
  );
}

Static components default props

All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

import { MantineProvider, Button } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          MenuItem: {
            defaultProps: { color: 'red' },
          },

          TabsList: {
            defaultProps: {
              position: 'right',
            },
          },

          RichTextEditorToolbar: {
            defaultProps: {
              sticky: true,
              stickyOffset: 60,
            },
          },
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

Input.Placeholder component

Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

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

function Demo() {
  return (
    <Input component="button">
      <Input.Placeholder>Placeholder content</Input.Placeholder>
    </Input>
  );
}

Other changes

RangeSlider component now supports maxRange prop
Stepper component now supports any CSS color value in color prop
use-hotkeys hook now allows to configure whether default behavior should be prevented
Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props