• [@mantine/hooks] use-media-query: Fix hook crashing inside iframe in Safari (#8189)
• [@mantine/hooks] use-debounced-value: Make cancel a stable reference (#8181)
• [@mantine/core] Combobox: Fix incorrect flipping logic (#8179, #8194)
• [@mantine/core] InputBase: Fix broken padding in multiline inputs (#8177)

• [@mantine/core] ScrollArea: Fix ScrollArea.Autosize not resizing when width of children changes (#8160)
• [@mantine/core] ScrollArea: Fix scrollbars not resizing correctly with dynamic content (#8162)
• [@mantine/core] TagsInput: Fix backspace key removing values with readOnly prop set (#8066)
• [@mantine/core] NumberInput: Fix incorrect trailing zeros handling for decimal values (#8089)
• [@mantine/core] Fix incorrect padding of multiline inputs (#8156)
• [@mantine/hooks] use-list-state: Update types to allow state function initializer (#8157)

• @Jannchie made their first contribution in https://github.com/mantinedev/mantine/pull/8156
• @mrdjohnson made their first contribution in https://github.com/mantinedev/mantine/pull/8169
• @davlatsultonov made their first contribution in https://github.com/mantinedev/mantine/pull/8168
• @brofar made their first contribution in https://github.com/mantinedev/mantine/pull/8163
• @monam2 made their first contribution in https://github.com/mantinedev/mantine/pull/8162
• @pgrones made their first contribution in https://github.com/mantinedev/mantine/pull/8160

Full Changelog: https://github.com/mantinedev/mantine/compare/8.2.4...8.2.5

• [@mantine/dates] DateInput: Fix disabled and clearable props collision (#8098)
• [@mantine/modals] Fix incorrect confirmProps and cancelProps types (#8099)
• [@mantine/dates] TimePicker: Fix controlled incorrect controlled value updates handling (#8108)
• [@mantine/core] NumberInput: Fix incorrect value sanitization in onBlur for max value clamping (#8114)
• [@mantine/core] Fix MultiSelect and TagsInput pills not being centered (#8145)
• [@mantine/core] Table: Fix 1px gap on thead with sticky + withTableBorder combination (#8109)
• [@mantine/core] Fix caret being invisible in some inputs (#8149)
• [@mantine/tiptap] Fix controls props being overridden by default props (#8148)
• [@mantine/code-highlight] Fix aria-label not being set on the copy button (#8130)
• [@mantine/code-highlight] Fix incorrect overscroll behavior

• @M1n01 made their first contribution in https://github.com/mantinedev/mantine/pull/8130
• @vicke4 made their first contribution in https://github.com/mantinedev/mantine/pull/8148
• @EdwardEB made their first contribution in https://github.com/mantinedev/mantine/pull/8149
• @themm-s made their first contribution in https://github.com/mantinedev/mantine/pull/8109

Full Changelog: https://github.com/mantinedev/mantine/compare/8.2.3...8.2.4

• [@mantine/dates] DatePickerInput: Fix incorrect handling of multiline values (#8116)
• [@mantine/code-highlight] Fix gradient of expand button not being visible on mobile Safari
• [@mantine/core] Combobox: Fix Combobox.Group not having aria-labelledby attribute
• [@mantine/core] Switch: Fix tap highlight color not being disabled on touch devices
• [@mantine/core] Remove transition with loader in ActionIcon and Button components if loading prop is not set to improve performance
• [@mantine/core] Combobox: Fix unexpected closed dropdown position calculation reducing performance
• [@mantine/charts] Fix tooltip not being aligned for some fonts
• [@mantine/dates] DatePickerInput: Fix incorrect Styles API selectors
• [@mantine/core] Table: Fix missing border when rowspan is set (#8137)
• [@mantine/hooks] use-move: Fix error dsiplayed in console for touch devices (#8065)
• [@mantine/dates] Fix incorrect props assigned to CalendarAriaLables props

• @sublimemm made their first contribution in https://github.com/mantinedev/mantine/pull/8124
• @TheMineWay made their first contribution in https://github.com/mantinedev/mantine/pull/8137

Full Changelog: https://github.com/mantinedev/mantine/compare/8.2.2...8.2.3

• [@mantine/core] Menu: Fix incorrect overflow handling of submenu (#8123)
• [@mantine/hooks] use-merged-ref: Fix incorrect handling of React 19 cleanup ref callback (#8118)
• [@mantine/dates] TimePicker: Fix incorrect leading zero handling in 12h format (#8120)
• [@mantine/dates] TimePicker: Fix min/max values not being enforced for 12h time format (#8107)
• [@mantine/core] HoverCard: Improve outside clicks handling (#8097)
• [@mantine/dates] Add month and year switching with keyboard to Calendar-based components (#7959)
• [@mantine/core] ScrollArea: Add onOverflowChange prop support to ScrollArea.Autosize (#7972)
• [@mantine/core] MultiSelect: Add clearSearchOnChange prop support (#8068)
• [@mantine/core] Select: Fix caret being visible in Firefox when the component is read only (#8063)

• @pradip-v2 made their first contribution in https://github.com/mantinedev/mantine/pull/8083
• @MidnightDesign made their first contribution in https://github.com/mantinedev/mantine/pull/8071
• @jobrk made their first contribution in https://github.com/mantinedev/mantine/pull/8068
• @amansachdev made their first contribution in https://github.com/mantinedev/mantine/pull/7959
• @idealconceptz made their first contribution in https://github.com/mantinedev/mantine/pull/8107
• @seansps made their first contribution in https://github.com/mantinedev/mantine/pull/8118

Full Changelog: https://github.com/mantinedev/mantine/compare/8.2.0...8.2.2

View changelog with demos on mantine.dev website

You now can pass attributes to inner elements of all components that support Styles API with attributes prop. For example, it can be used to add data attributes for testing purposes:

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

function Demo() {
  return (
    <Button
      attributes={{
        root: { 'data-test-id': 'root' },
        label: { 'data-test-id': 'label' },
        inner: { 'data-test-id': 'inner' },
      }}
    >
      Button
    </Button>
  );
}

Container now supports strategy="grid" prop which enables more features.

Differences from the default strategy="block":

• Uses display: grid instead of display: block
• Does not include default inline padding
• Does not set max-width on the root element (uses grid template columns instead)

Features supported by strategy="grid":

• Everything that is supported by strategy="block"
• Children with data-breakout attribute take the entire width of the container's parent element
• Children with data-container inside data-breakout have the same width as the main grid column

Example of using breakout feature:

import { Box, Container } from '@mantine/core';

function Demo() {
  return (
    <Container strategy="grid" size={500}>
      <Box bg="var(--mantine-color-indigo-light)" h={50}>
        Main content
      </Box>

      <Box data-breakout bg="var(--mantine-color-indigo-light)" mt="xs">
        <div>Breakout</div>

        <Box data-container bg="indigo" c="white" h={50}>
          <div>Container inside breakout</div>
        </Box>
      </Box>
    </Container>
  );
}

New Tooltip target prop is an alternative to children. It accepts a string (selector), an HTML element or a ref object with HTML element. Use target prop when you do not render tooltip target as JSX element.

Example of using target prop with a string selector:

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

function Demo() {
  return (
    <>
      <Tooltip target="#hover-me" label="Tooltip over button" />
      <Button id="hover-me">Hover me to see tooltip</Button>
    </>
  );
}

HoverCard now supports delay synchronization between multiple instances using HoverCard.Group component:

import { HoverCard, Button, Text, Group } from '@mantine/core';

function Demo() {
  return (
    <HoverCard.Group openDelay={500} closeDelay={100}>
      <Group justify="center">
        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>First</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">First hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Second</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Second hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Third</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Third hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </HoverCard.Group>
  );
}

New use-selection hook:

import { Checkbox, Table } from '@mantine/core';
import { useSelection } from '@mantine/hooks';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function Demo() {
  const positions = useMemo(() => elements.map((element) => element.position), [elements]);

  const [selection, handlers] = useSelection({
    data: positions,
    defaultSelection: [39, 56],
  });

  const rows = elements.map((element) => {
    const isSelected = selection.includes(element.position);
    return (
      <Table.Tr key={element.name} bg={isSelected ? 'var(--mantine-color-blue-light)' : undefined}>
        <Table.Td>
          <Checkbox
            aria-label="Select row"
            checked={isSelected}
            onChange={(event) => {
              if (event.target.checked) {
                handlers.select(element.position);
              } else {
                handlers.deselect(element.position);
              }
            }}
          />
        </Table.Td>
        <Table.Td>{element.position}</Table.Td>
        <Table.Td>{element.name}</Table.Td>
        <Table.Td>{element.symbol}</Table.Td>
        <Table.Td>{element.mass}</Table.Td>
      </Table.Tr>
    );
  });

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>
            <Checkbox
              aria-label="Select deselect all rows"
              indeterminate={handlers.isSomeSelected()}
              checked={handlers.isAllSelected()}
              onChange={() => {
                if (handlers.isAllSelected()) {
                  handlers.resetSelection();
                } else {
                  handlers.setSelection(elements.map((el) => el.position));
                }
              }}
            />
          </Table.Th>
          <Table.Th>Element position</Table.Th>
          <Table.Th>Element name</Table.Th>
          <Table.Th>Symbol</Table.Th>
          <Table.Th>Atomic mass</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}

Select and Autocomplete components now support autoSelectOnBlur prop. Use it to automatically select the highlighted option when the input loses focus. To see this feature in action: select an option with up/down arrows, then click outside the input:

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

function Demo() {
  return (
    <Select
      label="Your favorite library"
      placeholder="Pick value"
      autoSelectOnBlur
      searchable
      data={['React', 'Angular', 'Vue', 'Svelte']}
    />
  );
}

RichTextEditor now supports source edit mode:

import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';
import { useState } from 'react';

function Demo() {
  const [isSourceCodeModeActive, onSourceCodeTextSwitch] = useState(false)

  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>',
  });

  return (
    <RichTextEditor editor={editor} onSourceCodeTextSwitch={onSourceCodeTextSwitch}>
      <RichTextEditor.Toolbar>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.SourceCode icon={BoldIcon} />
        </RichTextEditor.ControlsGroup>
        {!isSourceCodeModeActive && (
          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Blockquote />
            <RichTextEditor.Bold />
            <RichTextEditor.Italic />
            <RichTextEditor.Underline />
            <RichTextEditor.Strikethrough />
            <RichTextEditor.ClearFormatting />
            <RichTextEditor.Highlight />
          </RichTextEditor.ControlsGroup>
        )}
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

You can now use the latest Recharts 3 version with Mantine charts. @mantine/charts package was validated to work with both Recharts 2 and Recharts 3 versions. Note that, there might still be some minor issues with Recharts 3, you are welcome to report issues on GitHub.

• Accordion default chevronSize prop value was changed to auto to allow using dynamic icon sizes
• Accordion now supports chevronIconSize prop to configure size of the default chevron icon
• AffixPosition type is now exported from @mantine/core package
• errorProps, labelProps and descriptionProps props of all inputs now have stricter types and better IDE autocomplete
• TypographyStylesProvider was renamed to just Typography to simplify usage. TypographyStylesProvider name is still available but marked as deprecated – it will be removed in 9.0.0 release.
• Slider and RangeSlider components now have separate documentation pages

• [@mantine/core] Container: Fix base responsive props value not being handled correctly (#8054)
• [@mantine/form] Fix type errors with read only array types (#7950)
• [@mantine/core] Fix incorrect disabled border color of Checkbox, Radio and Slider (#8053)
• [@mantine/core] Combobox: Fix aria-expanded attribute not being assigned correctly to combobox target
• [@mantine/core] Menu: Fix SubMenu having visual arrow offset when default props are set for Popover on theme (#8027)
• [@mantine/form] Fix form.resetField not updating DOM with mode: 'uncontrolled' (#8050)
• [@mantine/form] Add option to trigger watch callbacks when nested field value changes (#8026)
• [@mantine/hooks] use-move: Fix React 18 compatibility (#8018)
• [@mantine/dates] DateTimePicker: Add defaultDate prop support (#8023)
• [@mantine/dates] DatePickerInput: Fix size="xs being slightly different from other inputs
• [@mantine/dates] TimePicker: Fix dropdown being visible even when withDropdown={false} is set
• [@mantine/core] Popover: Fix onClick not firing on the child of Popover.Target
• [@mantine/spotlight] Fix incorrect query prop with empty string handling
• [@mantine/core] Text: Fix autocomplete not working for size prop
• [@mantine/hooks] use-debounced-callback: Fix incorrect leading behavior (#8021)
• [@mantine/core] Collapse: Add keepMounted prop support (#8013)
• [@mantine/date] TimePicker: Fix disabled and readOnly props not working (#8011)

• @Retwix made their first contribution in https://github.com/mantinedev/mantine/pull/8032
• @crehard made their first contribution in https://github.com/mantinedev/mantine/pull/8018
• @erwijet made their first contribution in https://github.com/mantinedev/mantine/pull/8026
• @evantrimboli made their first contribution in https://github.com/mantinedev/mantine/pull/7950

Full Changelog: https://github.com/mantinedev/mantine/compare/8.1.2...8.1.3

• [@mantine/dates] DatePickerInput: Fix incorrect presets handling
• [@mantine/dates] DatePickerInput: Fix onDropdownClose not being called in some cases
• [@mantine/hooks] use-scroll-spy: Add scrollHost option support (#8003)
• [@mantine/core] PinInput: Fix incorrect default size (#7990)
• [@mantine/core] Fix bdrs prop not working (#7996)
• [@mantine/core] Fix env prop not being available on HeadlessMantineProvider (#7992)
• [@mantine/core] Fix placeholder overflowing MultiSelect and TagsInput components
• [@mantine/core] Popover: fix autoUpdate triggering extra rerenders with keepMounted (#7983)

• @chumba-wamba made their first contribution in https://github.com/mantinedev/mantine/pull/7992

Full Changelog: https://github.com/mantinedev/mantine/compare/8.1.1...8.1.2

• [@mantine/hooks] use-set: Fix union method not working correctly (#7981)
• [@mantine/core] Popover: Fix incorrect position handling (#7955, #7953)
• [@mantine/dates] TimePicker: Fix incorrect empty string handling (#7927)
• [@mantine/dates] DatePickerInput: Fix incorrect onChange type (#7943)
• [@mantine/dates] TimePicker: Fix incorrect handling of min/max values in some cases (#7904)
• [@mantine/hooks] use-hotkeys: Fix Escape key not being handled correctly in some browsers (#7928)
• [@mantine/core] Tree: Fix detached DOM nodes memory leak (#7940)
• [@mantine/hooks] use-debounced-callback: Add cancel method support (#7965)
• [@mantine/dates] DatePicker: Fix incorrect value type for type="range" (#7937)
• [@mantine/dates] DatePicker: Fix className and style props not working when presets prop is set (#7960)

• @JeonJaewon made their first contribution in https://github.com/mantinedev/mantine/pull/7978
• @KevinLu made their first contribution in https://github.com/mantinedev/mantine/pull/7942

Full Changelog: https://github.com/mantinedev/mantine/compare/8.1.0...8.1.1

View changelog with demos on mantine.dev website

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

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>;
}

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

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:

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 component now support domain prop that allows setting the possible range of values independently of the min and max values:

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 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} />;
}

@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,
];

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),
})

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

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