Version v8.1.0

Release date

June 10th, 2025

Source code

Support Mantine development

You can now sponsor Mantine development with OpenCollective. All funds are used to improve Mantine and create new features and components.

Sponsor Mantine

DatePicker presets

DatePicker, DatePickerInput and DateTimePicker now support presets prop that allows you to add custom date presets. Presets are displayed next to the calendar:

import dayjs from 'dayjs';
import { DatePicker } from '@mantine/dates';

function Demo() {
  const today = dayjs();

  return (
    <DatePicker
      type="range"
      presets={[
        {
          value: [today.subtract(2, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'Last two days',
        },
        {
          value: [today.subtract(7, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'Last 7 days',
        },
        {
          value: [today.startOf('month').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'This month',
        },
        {
          value: [
            today.subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
            today.subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),
          ],
          label: 'Last month',
        },
        {
          value: [
            today.subtract(1, 'year').startOf('year').format('YYYY-MM-DD'),
            today.subtract(1, 'year').endOf('year').format('YYYY-MM-DD'),
          ],
          label: 'Last year',
        },
      ]}
    />
  );
}

Calendar and other components based on it now support headerControlsOrder prop. You can use headerControlsOrder prop to change the order of header controls. The prop accepts an array of 'next' | 'previous' | 'level. Note that each control can be used only once in the array.

import { DatePicker } from '@mantine/dates';

function Demo() {
  return (
    <DatePicker
      defaultDate="2022-02-01"
      headerControlsOrder={['level', 'previous', 'next']}
      styles={{
        calendarHeaderLevel: {
          justifyContent: 'flex-start',
          paddingInlineStart: 8,
        },
      }}
    />
  );
}

Popover middlewares improvements

Popover component now handles shift and flip Floating UI differently. Starting from 8.1.0 version, the popover dropdown position is not changed when the popover is opened. shift and flip middlewares are used only once to calculate the initial position of the dropdown.

This change fixes incorrect flipping/shifting behavior when there is dynamic content in the dropdown. For example, searchable Select and DatePickerInput without consistentWeeks option.

Previous behavior:

New behavior:

use-long-press hook

New use-long-press hook:

import { Button } from '@mantine/core';
import { useLongPress } from '@mantine/hooks';
import { notifications } from '@mantine/notifications';

function Demo() {
  const handlers = useLongPress(() => notifications.show({ message: 'Long press triggered' }));
  return <Button {...handlers}>Press and hold</Button>;
}

Reference area support in charts

BarChart, AreaChart and LineChart components now support reference area. Reference area is a rectangular area that can be used to highlight a specific region of the chart:

import { ReferenceArea } from 'recharts';
import { BarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="month"
      series={[
        { name: 'Smartphones', color: 'violet.6' },
        { name: 'Laptops', color: 'blue.6' },
        { name: 'Tablets', color: 'teal.6' },
      ]}
    >
      <ReferenceArea
        x1="January"
        x2="March"
        y1={0}
        y2={1250}
        yAxisId="left"
        fillOpacity={0.3}
        strokeOpacity={0.9}
        fill="var(--mantine-color-gray-4)"
        stroke="var(--mantine-color-gray-6)"
        strokeWidth={1}
        label={{
          value: 'Q1 sales threshold',
          position: 'insideTopRight',
          fontSize: 12,
          fill: 'var(--mantine-color-bright)',
        }}
      />
    </BarChart>
  );
}

use-form resetField handler

use-form now has a resetField method that resets field value to its initial value:

import { useForm } from '@mantine/form'

const form  = useForm({ initialValues: { name: 'John Doe' } });

form.resetField('name'); // resets name field to 'John Doe'

TagsInput isDuplicate prop

You can now use isDuplicate prop in TagsInput component to control how duplicates are detected. It is a function that receives two arguments: tag value and current tags. The function must return true if the value is duplicate.

Example of using isDuplicate to allow using the same value with different casing:

Press Enter to submit a tag

TagTAGtag

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

function Demo() {
  return (
    <TagsInput
      label="Press Enter to submit a tag"
      placeholder="Enter tag"
      isDuplicate={(tagValue, currentTags) => currentTags.some((val) => val === tagValue)}
      defaultValue={['Tag', 'TAG', 'tag']}
    />
  );
}

Slider domain prop

Slider component now supports domain prop that allows setting the possible range of values independently of the min and max values:

min

max

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

function Demo() {
  return (
    <Slider
      domain={[0, 100]}
      min={10}
      max={90}
      defaultValue={25}
      marks={[
        { value: 10, label: 'min' },
        { value: 90, label: 'max' },
      ]}
    />
  );
}

RangeSlider pushOnOverlap prop

RangeSlider component now supports pushOnOverlap prop that defines whether the slider should push the overlapping thumb when the user drags it.

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

function Demo() {
  return <RangeSlider pushOnOverlap={false} defaultValue={[25, 65]} minRange={20} />;
}

Hooks types exports

@mantine/hooks package now exports all types used in hooks options and return values. For example, you can now import use-uncontrolled types like this:

import type { UseUncontrolledOptions, UseUncontrolledReturnValue } from '@mantine/hooks';

Types exported from the library:

interface UseUncontrolledOptions<T> {
  /** Value for controlled state */
  value?: T;

  /** Initial value for uncontrolled state */
  defaultValue?: T;

  /** Final value for uncontrolled state when value and defaultValue are not provided */
  finalValue?: T;

  /** Controlled state onChange handler */
  onChange?: (value: T) => void;
}

type UseUncontrolledReturnValue<T> = [
  /** Current value */
  T,

  /** Handler to update the state, passes `value` and `payload` to `onChange` */
  (value: T, ...payload: any[]) => void,

  /** True if the state is controlled, false if uncontrolled */
  boolean,
];

zod v4 with use-form

You can now use zod v4 with use-form. To use zod 4:

Update mantine-form-zod-resolver to 1.2.1 or later version
Update zod to version 3.25.0 or later
Replace zod imports with zod/v4 (only if you have zod@3 in your package.json)
Replace zodResolver with zod4Resolver in your code
All other code remains the same

Example with zod v4:

import { z } from 'zod/v4';
import { zod4Resolver } from 'mantine-form-zod-resolver';

const schema = z.object({
  name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
  email: z.email({ message: 'Invalid email' }),
  age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
});

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: zod4Resolver(schema),
})

Documentation updates

use-debounced-callback documentation was updated to include new flush and flushOnUnmount features
Documentation about exported types was added to all applicable hooks

Other changes

All components now support bdrs style prop to set border radius.
DateTimePicker now supports defaultTimeValue prop
Tooltip now supports autoContrast prop.
Handlers returned from use-counter are now memoized.
Return value of use-event-listener, use-focus-within, use-focus-trap, use-hover, use-move, use-radial-move changed (React.RefObject -> React.RefCallback), required to fix incorrect ref handling in several cases. For more information, see the issue on GitHub – #7406.
Deprecated React.MutableRefObject type was replaced with React.RefObject in all packages to better support React 19 types.
positionDependencies prop is now deprecated in Tooltip, Popover and other components based on Popover. The prop is no longer required and can be safely removed. positionDependencies prop will be removed in 9.0 release.

eslint-config-mantine

Version v8.0.0

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su