8.2.2

What's Changed

• [@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)

New Contributors

• @pradip-v2 made their first contribution in #8083
• @MidnightDesign made their first contribution in #8071
• @jobrk made their first contribution in #8068
• @amansachdev made their first contribution in #7959
• @idealconceptz made their first contribution in #8107
• @seansps made their first contribution in #8118

Full Changelog: 8.2.0...8.2.2

8.2.0 🔥

View changelog with demos on mantine.dev website

Styles API attributes

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 grid strategy

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

Tooltip target

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

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

use-selection hook

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

autoSelectOnBlur prop

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']}
    />
  );
}

Source edit mode in RichTextEditor

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

Recharts 3 support

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.

Other changes

• 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

8.1.3

What's Changed

• [@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)

New Contributors

• @Retwix made their first contribution in #8032
• @crehard made their first contribution in #8018
• @erwijet made their first contribution in #8026
• @evantrimboli made their first contribution in #7950

Full Changelog: 8.1.2...8.1.3

8.1.2

What's Changed

• [@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)

New Contributors

• @chumba-wamba made their first contribution in #7992

Full Changelog: 8.1.1...8.1.2

8.1.1

What's Changed

• [@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)

New Contributors

• @JeonJaewon made their first contribution in #7978
• @KevinLu made their first contribution in #7942

Full Changelog: 8.1.0...8.1.1

8.1.0

View changelog with demos on mantine.dev website

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 headerControlsOrder

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.

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:

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 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 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](https://mantine.dev/core/...

7.17.8

What's Changed

• [@mantine/hooks] use-idle: Fix timeout not being cancelled when the parent component unmounts (#7914)
• [@mantine/core] Collapse: Fix inert attribute being incompatible with React 18 (#7911)
• [@mantine/core] Overlay: Fix blur not working in older browsers (#7907)
• [@mantine/core] Fix toRgba function incorrectly handling values with zero transparency (#7906)
• [@mantine/core] ScrollArea: Fix onBottomReached not being called when the container size has sub-pixel value
• [@mantine/form] Fix form.reorderItem reordering only the first item (#7892)
• [@mantine/core] Popover: Fix onOpen/onClose being called when disabled prop is set (#7868)
• [@mantine/spotlight] Fix labels containing single quote passed to Spotlight.ActionGroup not working (#7865)
• [@mantine/core] Collapse: Fix inert prop not being compatible with React 18 (#7864)
• [@mantine/core] List: Fix incorrect types when type="unordered" (#7861)
• [@mantine/core] AngleSlider: Fix incorrect arrow events handling (#7862)
• [@mantine/dates] DateInput: Fix Escape key not closing dropdown (#7857)
• [@mantine/hooks] use-shallow-effect: Fix NaN value not being handled correctly (#7851)
• [@mantine/core] MutltiSelect: Fix onPaste prop not being passed to the input element (#7838)
• [@mantine/core] Button: Fix FileButton breaking Button.Group styles (#7835)
• [@mantine/core] Modal Fix incorrect header styles with ScrollArea (#7832)
• [@mantine/dropzone] Fix status being stuck in rejected state when a file with incorrect mime type is dropped
• [@mantine/core] AngleSlider: Fix incorrect thumb position in RTL layouts (#7822)
• [@mantine/core] Select: Fix onSearchChange being triggered when controlled search value is updated (#7814)
• [@mantine/dates] TimeInput: Fix step prop not working (#7811)
• [@mantine/core] Table: Add scrollAreaProps support to Table.ScrollContainer (#7798)
• [@mantine/core] Stepper: Fix unexpected bottom spacing in vertical orientation (#7794)
• [@mantine/core] PasswordInput: Fix aria-describedby not pointing to error and description elements (#7793)
• [@mantine/core] Switch: Fix div element used inside label (#7776)
• [@mantine/core] Collapse: Fix children with scale animations not working correctly when collapse is opened (#7774)
• [@mantine/core] Transition: Fix exitDuration not working correctly for rapid changes (#7773)
• [@mantine/core] Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)

New Contributors

• @deedw made their first contribution in #7914
• @VirtuoUK made their first contribution in #7907
• @ylvaselling made their first contribution in #7906

Full Changelog: 8.0.2...7.17.8

8.0.2

What's Changed

• [@mantine/dates] DateTimePicker: Fix incorrect onChange value type
• [@mantine/core] ScrollArea: Fix onBottomReached not being called when the container size has sub-pixel value
• [@mantine/dates] TimePicker: Improve leading zero input handling
• [@mantine/dates] TimePicker: Fix setting value to an empty string not reseting displayed time in some cases
• [@mantine/form] Fix form.reorderItem reordering only the first item (#7892)
• [@mantine/dates] DateInput: Fix selected month and year not being highlighted (#7897)
• [@mantine/hooks] use-local-storage: Add queueMicrotask for dispatching update events to fix multiple hook instances synchonization (#7874)
• [@mantine/dates] Fix leftover timezone issues after 8.0 strings migration (#7878)
• [@mantine/form] Add zod v4 support (#7871)
• [@mantine/core] Popover: Fix onOpen/onClose being called when disabled prop is set (#7868)
• [@mantine/spotlight] Fix labels containing single quote passed to Spotlight.ActionGroup not working (#7865)
• [@mantine/core] Collapse: Fix inert prop not being compatible with React 18 (#7864)
• [@mantine/core] List: Fix incorrect types when type="unordered" (#7861)
• [@mantine/core] AngleSlider: Fix incorrect arrow events handling (#7862)
• [@mantine/dates] DateInput: Fix Escape key not closing dropdown (#7857)
• [@mantine/hooks] use-shallow-effect: Fix NaN value not being handled correctly (#7851)

New Contributors

• @gentunian made their first contribution in #7869
• @sungpaks made their first contribution in #7891
• @akoll made their first contribution in #7874
• @parsadotsh made their first contribution in #7899

Full Changelog: 8.0.1...8.0.2

8.0.1

What's Changed

• [@mantine/hooks] use-debounced-callback: Add leading: true option support (#7841)
• [@mantine/core] Tabs: Fix incorrect Tabs.List styles with grow prop enabled
• [@mantine/core] MutltiSelect: Fix onPaste prop not being passed to the input element (#7838)
• [@mantine/dates] TimePicker: Fix up/down arrows not working correctly with step prop (#7784)
• [@mantine/core] Button: Fix FileButton breaking Button.Group styles (#7835)
• [@mantine/core] Modal Fix incorrect header styles with ScrollArea (#7832)
• [@mantine/dropzone] Fix status being stuck in rejected state when a file with incorrect mime type is dropped
• [@mantine/core] Switch: Fix incorrect thumb position in RTL layouts (#7822)
• [@mantine/core] AngleSlider: Fix incorrect thumb position in RTL layouts (#7822)
• [@mantine/core] Menu: Fix default props not working in Menu.Sub (#7820)
• [@mantine/core] Disable scaling explicit rem units in rem function (#7821)
• [@mantine/core] Slider: Fix incorrect track width (#7464)
• [@mantine/dates] TimeInput: Fix step prop not working (#7811)
• [@mantine/core] Select: Fix onSearchChange being triggered when controlled search value is updated (#7814)
• [@mantine/dropzone] Migrate back to react-dropzone from react-dropzone-esm
• [@mantine/code-highlight] Fix tooltip being cut off in components with 1-2 lines of code (#7816)
• [@mantine/core] Fix inconsistent disabled styles in some components, add CSS variables for disabled colors (#7805)
• [@mantine/dates] DatePicker: Add selected date highlight in year and month picker for type="default" (#7799)
• [@mantine/core] Table: Add scrollAreaProps support to Table.ScrollContainer (#7798)
• [@mantine/core] Fix boolean value not being included in data-* attributes types (#7810)
• [@mantine/dates] DateInput: Fix incorrect onChange value type (#7796)
• [@mantine/core] Stepper: Fix unexpected bottom spacing in vertical orientation (#7794)
• [@mantine/core] PasswordInput: Fix aria-describedby not pointing to error and description elements (#7793)
• [@mantine/core] Switch: Fix div element used inside label (#7776)
• [@mantine/dates] Add empty string handling as empty value (#7780)
• [@mantine/core] Collapse: Fix children with scale animations not working correctly when collapse is opened (#7774)
• [@mantine/core] Transition: Fix exitDuration not working correctly for rapid changes (#7773)
• [@mantine/dates] TimePicker: Fix 00 in dropdown not being reachable with arrow keys when it is outside scroll position (#7788)
• [@mantine/core] Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)
• [@mantine/core] Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)

New Contributors

• @mikkurogue made their first contribution in #7780
• @kawarimidoll made their first contribution in #7807
• @codjix made their first contribution in #7804
• @GermainBergeron made their first contribution in #7805
• @kaareal made their first contribution in #7814
• @Bvngee made their first contribution in #7464
• @russellbanks made their first contribution in #7820
• @jonjomckay made their first contribution in #7841

Full Changelog: 8.0.0...8.0.1

8.0.0 🌶️

View changelog with demos on mantine.dev website

Migration guide

This changelog covers breaking changes and new features in Mantine 8.0.
To migrate your application to Mantine 8.0, follow 7.x → 8.x migration guide.

Granular global styles exports

Global styles are now splitted between 3 files:

• baseline.css – a minimal CSS reset, sets box-sizing: border-box and changes font properties
• default-css-variables.css – contains all CSS variables generated from the default theme
• global.css – global classes used in Mantine components

If you previously imported individual styles from @mantine/core package, you need to update imports
to use new files:

import '@mantine/core/styles/baseline.css';
import '@mantine/core/styles/default-css-variables.css';
import '@mantine/core/styles/global.css';

If you imported @mantine/core/styles.css, no changes are required –
all new files are already included in styles.css.

Menu with submenus

Menu component now supports submenus:

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

function Demo() {
  return (
    <Menu width={200} position="bottom-start">
      <Menu.Target>
        <Button>Toggle Menu</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Item>Dashboard</Menu.Item>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Products</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>All products</Menu.Item>
            <Menu.Item>Categories</Menu.Item>
            <Menu.Item>Tags</Menu.Item>
            <Menu.Item>Attributes</Menu.Item>
            <Menu.Item>Shipping classes</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Orders</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>Open</Menu.Item>
            <Menu.Item>Completed</Menu.Item>
            <Menu.Item>Cancelled</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Settings</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>Profile</Menu.Item>
            <Menu.Item>Security</Menu.Item>
            <Menu.Item>Notifications</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>
      </Menu.Dropdown>
    </Menu>
  );
}

Popover hideDetached

Popover component now supports hideDetached prop to configure how the dropdown behaves when the target
element is hidden with styles (display: none, visibility: hidden, etc.),
removed from the DOM, or when the target element is scrolled out of the viewport.

By default, hideDetached is enabled – the dropdown is hidden with the target element.
You can change this behavior with hideDetached={false}. To see the difference, try to scroll
the root element of the following demo:

import { Box, Button, Group, Popover } from '@mantine/core';

function Demo() {
  return (
    <Box
      bd="1px solid var(--mantine-color-dimmed)"
      p="xl"
      w={400}
      h={200}
      style={{ overflow: 'auto' }}
    >
      <Box w={1000} h={400}>
        <Group>
          <Popover width="target" position="bottom" opened>
            <Popover.Target>
              <Button>Toggle popover</Button>
            </Popover.Target>
            <Popover.Dropdown>This popover dropdown is hidden when detached</Popover.Dropdown>
          </Popover>

          <Popover width="target" position="bottom" opened hideDetached={false}>
            <Popover.Target>
              <Button>Toggle popover</Button>
            </Popover.Target>
            <Popover.Dropdown>This popover dropdown is visible when detached</Popover.Dropdown>
          </Popover>
        </Group>
      </Box>
    </Box>
  );
}

Date values as strings

All @mantine/dates components now use date strings in YYYY-MM-DD or YYYY-MM-DD HH:mm:ss
format instead of Date objects. This change was made to resolve issues related to timezones
– now the output of all @mantine/dates components does not include any timezone-specific information.
Follow 7.x → 8.x migration guide to learn how to update the code to use new string values.

Example of using DatePicker component with string values:

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

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return <DatePicker value={value} onChange={setValue} />;
}

DatesProvider timezone

DatesProvider component no longer supports timezone option – all @mantine/dates
components now use strings in YYYY-MM-DD HH:mm:ss format as values and do not contain
timezone information.

If you need to handle timezones in your application, you can use a dedicated dates library
(dayjs, luxon, date-fns)
to update timezone values.

Example of using Mantine components with dayjs:

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

function Demo() {
  const [value, setValue] = useState<string | null>('2022-08-21');

  // Mantine components use strings as values, you can pass these
  // strings to a dates library of your choice to assign timezone
  const dateWithTimeZone = dayjs(value).tz("America/Toronto").toDate();

  return <DatePicker value={value} onChange={setValue} />;
}

TimePicker component

New TimePicker component is an alternative to
TimeInput that offers more features. It supports 24-hour and 12-hour formats,
dropdown with hours, minutes and seconds, and more.

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

function Demo() {
  return (
    <>
      <TimePicker label="Enter time (24h format)" withSeconds withDropdown />
      <TimePicker label="Enter time (12h format)" withSeconds withDropdown format="12h" mt="md" />
    </>
  );
}

DateTimePicker component changes

DateTimePicker component now uses TimePicker under
the hood instead of TimeInput. You can now use all TimePicker
features with DateTimePicker component.

Prop timeInputProps is no longer available, to pass props down to the underlying TimePicker
you need to use timePickerProps prop.

Example of enabling dropdown and setting 12h format for time picker:

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

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      timePickerProps={{
        withDropdown: true,
        popoverProps: { withinPortal: false },
        format: '12h',
      }}
    />
  );
}

TimeValue component

New TimeValue component can be used to display a formatted time string
with similar formatting options to TimePicker component.

import { Text } from '@mantine/core';
import { TimeValue } from '@mantine/dates';

function Demo() {
  return (
    <div>
      <Text>
        24h format: <TimeValue value="18:45:34" />
      </Text>
      <Text>
        12h format: <TimeValue value="18:45:34" format="12h" />
      </Text>
    </div>
  );
}

TimeGrid component

New TimeGrid component allows to capture time value from the user with a
predefined set of time slots:

import { getTimeRange, TimeGrid } from '@mantine/dates';

function Demo() {
  return (
    <TimeGrid
      data={getTimeRange({ startTime: '10:00', endTime: '21:00', interval: '01:00' })}
      simpleGridProps={{
        type: 'container',
        cols: { base: 1, '180px': 2, '320px': 3 },
        spacing: 'xs',
      }}
      withSeconds={false}
    />
  );
}

Heatmap component

New Heatmap component allows to display data in a calendar heatmap format:

import dayjs from 'dayjs';
import { Heatmap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <Heatmap
      data={data}
      startDate="2024-02-16"
      endDate="2025-02-16"
      withTooltip
      withWeekdayLabels
      withMonthLabels
      getTooltipLabel={({ date, value }) =>
        `${dayjs(date).format('DD MMM, YYYY')} – ${value === null || value === 0 ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
      }
    />
  );
}

CodeHighlight changes

@mantine/code-highlight package no longer depends on
highlight.js. Instead, it now provides a new API based
on adapters that allows using any syntax highlighter of your choice. Out of the box,
@mantine/code-highlight provides adapters for shiki and
highlight.js.

To learn about the migration process and how to use the new adapters API, check the
updated CodeHighlight documentation and [7.x → 8.x migration guide](...