• [@mantine/form] Add form.getInitialValues handler
• [@mantine/core] RangeSlider: Fix first thumb not being focused when the component root is clicked (#7731)
• [@mantine/core] PillsInput: Remove lefover multiline prop types (#7727)
• [@mantine/charts] CompositeChart: Fix type="stacked" being confused with BarChart behavior
• [@mantine/core] Notification: Allow changing role attribute on the root element (#7682)
• [@mantine/hooks] use-idle: Fix wheel event not being tracked (#7669)
• [@mantine/core] Table: Add maxHeight prop support to Table.ScrollContainer (#7713)
• [@mantine/core] Modal: Fix incorrect Escape key handling during IME composition (#7700)
• [@mantine/form] Add defaultChecked to form.getInputProps return type (#7702)
• [@mantine/hooks] use-hotkeys: Update matching logic to include both physical and layout keys (#7708)
• [@mantine/dates] Fix day.js isSame function not working correctly for non-Gregorian calendars (#7712)
• [@mantine.core] SegmentedControl: Fix animation not working with controlled value (#7721)

• @danielytics made their first contribution in https://github.com/mantinedev/mantine/pull/7708
• @tvandoren made their first contribution in https://github.com/mantinedev/mantine/pull/7702
• @AliAkrem made their first contribution in https://github.com/mantinedev/mantine/pull/7669
• @scato3 made their first contribution in https://github.com/mantinedev/mantine/pull/7739

Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.4...7.17.5

• [@mantine/hooks] use-orientation: Add option to customize initial values (#7657)
• [@mantine/core] Fix selectFirstOptionOnChange not working correctly (#7583)
• [@mantine/core] Fix error thrown when Textarea was used on cloudflare workers (#7637)
• [@mantine/core] Allow spacing, radius and font-size types augmentation (#7644)
• [@mantine/core] ScrollArea: Fix scrollbars being invisible when offsetScrollbars='present' is not set (#7647)
• [@mantine/core] TypographyStylesProvider: Fix headings font-family not matching the value defined on the theme (#7651)
• [@mantine/core] Paper: Add CSS variable for border-color for easier overrides (#7654)
• [@mantine/core] Table: Fix stickyHeader prop affecting border rendering (#7658)
• [@mantine/core] Slider: Fix onChangeEnd using stale external state (#7660)

• @Han5991 made their first contribution in https://github.com/mantinedev/mantine/pull/7660
• @WojakGra made their first contribution in https://github.com/mantinedev/mantine/pull/7658
• @drew-r made their first contribution in https://github.com/mantinedev/mantine/pull/7651
• @mark-night made their first contribution in https://github.com/mantinedev/mantine/pull/7644
• @Odonno made their first contribution in https://github.com/mantinedev/mantine/pull/7636

Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.3...7.17.4

• [@mantine/core] Pill: Fix incorrect removeButtonProps type
• [@mantine/modals] Fix data-* attributes not being included in types for confirm and cancel button props
• [@mantine/core] Fix incorrect selected option position handling when search changes in Select, MultiSelect, Autocomplete and TagsInput (#7583)
• [@mantine/core] SegmentedControl: Fix incorrect indicator position when data is updated (#7615)
• [@mantine/core] ScrollArea: Fix scrollbars being revealed on hover when hidden with offsetScrollbars="present" (#7599)
• [@mantine/core] AppShell: Fix disabled prop not removing aside and footer margins (#7609)
• [@mantine/modals] Fix incorrect esm exports paths (#7603)
• [@mantine/core] Checkbox: Set indeterminate attribute on the DOM node (#7608, #7613)

• @andrewborstein made their first contribution in https://github.com/mantinedev/mantine/pull/7613
• @connorads made their first contribution in https://github.com/mantinedev/mantine/pull/7603
• @ofk made their first contribution in https://github.com/mantinedev/mantine/pull/7609

Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.2...7.17.3

• [@mantine/core] Menu: Fix missing withProps function
• [@mantine/core] Transition: Fix 1px child elements shift in Chrome for animations with scaling
• [@mantine/core] ScrollArea: Add offsetScrollbars="present" option support (#7527)
• [@mantine/core] Notification: Add loaderProps to pass props down to Loader component (#7577)
• [@mantine/core] Tooltip: Fix ref prop not working correctly on the child element of the tooltip (#7578)
• [@mantine/core] Select: Fix dropdown not openning in Firefox (#7539)

• @yushihang made their first contribution in https://github.com/mantinedev/mantine/pull/7579

Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.1...7.17.2

• [@mantine/core] Select: Fix caret displayed when the readonly input is clicked (#7476)
• [@mantine/charts] Fix incorrect types of classNames prop of PieChart and DonutChart components (#7475)
• [@mantine/charts] BubbleChart: Fix broken layout when label prop is used with React 19
• [@mantine/form] Fix missing isJSONString export (#7508)
• [@mantine/core] Fix MultiSelect and TagsInputs dropdowns still being opened on click when components were used inside disabled fieldset (#7528)
• [@mantine/code-highlight] Fallback unsupported code to plaintext (#7497)
• [@mantine/emotion] Improve "Go to definition" support for createStyles classes (#7526)

• @kino90 made their first contribution in https://github.com/mantinedev/mantine/pull/7513
• @tranhl made their first contribution in https://github.com/mantinedev/mantine/pull/7526
• @imcvampire made their first contribution in https://github.com/mantinedev/mantine/pull/7497
• @ched-dev made their first contribution in https://github.com/mantinedev/mantine/pull/7480
• @ysalo made their first contribution in https://github.com/mantinedev/mantine/pull/7508

Full Changelog: https://github.com/mantinedev/mantine/compare/7.17.0...7.17.1

View changelog with demos on mantine.dev website

This is the last minor release in the 7.x series. The next release will be 8.0 with breaking changes and new features.

You are welcome to review the changelog/code and provide feedback and bug reports in Discord or GitHub discussions:

• Changelog – https://alpha.mantine.dev/changelog/8-0-0/
• Source code – https://github.com/mantinedev/mantine/tree/8.0

How to update your project dependencies to the new alpha version:

• Open your package.json
• Find all @mantine/ packages
• Update version of all @mantine/ packages to 8.0.0-alpha.0
• Install dependencies with your package manager, for example, yarn or npm install

Important notes:

• 8.0 release is scheduled for May 5th. Until then you can influence the included breaking changes by proving feedback using Discord or GitHub discussions.
• Currently most of planned breaking changes are implemented – it is not planned to introduce other significant breaking changes (unless new versions of recharts or tiptap are released before May 5th).
• You can find the updated source code in 8.0 branch on GitHub
• Since the changes to codebase are not that significant compared to previous major releases, it is not planned to deprecate 7.x version as soon as 8.0 is release. 7.17.x patches are planned to be released for some time – if you are not ready to migrate to 8.x, you will still be able to receive bug fixes for 7.x (no new features though).

Portal component now supports reuseTargetNode prop which allows to reuse the same target node for all instances. This option is more performant than the previous behavior, it is recommended to be enabled. This option will be enabled by default in the 8.0 major release.

To enable reuseTargetNode option in all components that depend on Portal, add the following code to your theme:

import { createTheme, Portal } from '@mantine/core';

export const theme = createTheme({
  components: {
    Portal: Portal.extend({
      defaultProps: {
        reuseTargetNode: true,
      },
    }),
  },
});

Example usage. In the following example, all three paragraphs will be rendered in the same target node:

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

function Demo() {
  return (
    <>
      <Portal reuseTargetNode>
        <p>First</p>
      </Portal>

      <Portal reuseTargetNode>
        <p>Second</p>
      </Portal>

      <Portal reuseTargetNode>
        <p>Third</p>
      </Portal>
    </>
  );
}

formRootRule is a special rule path that can be used to validate objects and arrays alongside with their nested fields. For example, it is useful when you want to capture a list of values, validate each value individually and then validate the list itself to not be empty:

import { IconTrash } from '@tabler/icons-react';
import { ActionIcon, Button, Group, Switch, Text, TextInput } from '@mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@mantine/form';
import { randomId } from '@mantine/hooks';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      employees: [{ name: '', active: false, key: randomId() }],
    },
    validate: {
      employees: {
        [formRootRule]: isNotEmpty('At least one employee is required'),
        name: isNotEmpty('Name is required'),
      },
    },
  });

  const fields = form.getValues().employees.map((item, index) => (
    <Group key={item.key} mt="xs">
      <TextInput
        placeholder="John Doe"
        withAsterisk
        style={{ flex: 1 }}
        key={form.key(`employees.${index}.name`)}
        {...form.getInputProps(`employees.${index}.name`)}
      />
      <Switch
        label="Active"
        key={form.key(`employees.${index}.active`)}
        {...form.getInputProps(`employees.${index}.active`, { type: 'checkbox' })}
      />
      <ActionIcon color="red" onClick={() => form.removeListItem('employees', index)}>
        <IconTrash size={16} />
      </ActionIcon>
    </Group>
  ));

  return (
    <form onSubmit={form.onSubmit(() => {})}>
      {fields.length > 0 ? (
        <Group mb="xs">
          <Text fw={500} size="sm" style={{ flex: 1 }}>
            Name
          </Text>
          <Text fw={500} size="sm" pr={90}>
            Status
          </Text>
        </Group>
      ) : (
        <Text c="dimmed" ta="center">
          No one here...
        </Text>
      )}

      {fields}

      {form.errors.employees && (
        <Text c="red" size="sm" mt="sm">
          {form.errors.employees}
        </Text>
      )}

      <Group justify="space-between" mt="md">
        <Button
          variant="default"
          onClick={() => {
            form.insertListItem('employees', { name: '', active: false, key: randomId() });
            form.clearFieldError('employees');
          }}
        >
          Add employee
        </Button>
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}

Another example is to validate an object fields combination:

import { Button, Text, TextInput } from '@mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      user: {
        firstName: '',
        lastName: '',
      },
    },

    validate: {
      user: {
        [formRootRule]: (value) =>
          value.firstName.trim().length > 0 && value.firstName === value.lastName
            ? 'First name and last name cannot be the same'
            : null,
        firstName: isNotEmpty('First name is required'),
        lastName: isNotEmpty('Last name is required'),
      },
    },
  });

  return (
    <form onSubmit={form.onSubmit(() => {})}>
      <TextInput
        label="First name"
        placeholder="First name"
        {...form.getInputProps('user.firstName')}
      />
      <TextInput
        label="Last name"
        placeholder="Last name"
        mt="md"
        {...form.getInputProps('user.lastName')}
      />
      {form.errors.user && (
        <Text c="red" mt={5} fz="sm">
          {form.errors.user}
        </Text>
      )}
      <Button type="submit" mt="lg">
        Submit
      </Button>
    </form>
  );
}

New isJSONString and isNotEmptyHTML form validators:

• isNotEmptyHTML checks that form value is not an empty HTML string. Empty string, string with only HTML tags and whitespace are considered to be empty.
• isJSONString checks that form value is a valid JSON string.

import { isJSONString, useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: {
    json: '',
    html: '',
  },

  validate: {
    json: isJSONString('Invalid JSON string'),
    html: isNotEmptyHTML('HTML cannot be empty'),
  },
});

Popover now supports onDismiss prop, which makes it easier to subscribe to outside clicks and escape key presses to close popover:

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

function Demo() {
  const [opened, setOpened] = useState(false);
  return (
    <Popover opened={opened} onDismiss={() => setOpened(false)}>
      <Popover.Target>
        <Button onClick={() => setOpened((o) => !o)}>Toggle popover</Button>
      </Popover.Target>

      <Popover.Dropdown>Dropdown</Popover.Dropdown>
    </Popover>
  );
}

MantineProvider component now supports env prop. It can be used in test environment to disable some features that might impact tests and/or make it harder to test components:

• transitions that mount/unmount child component with delay
• portals that render child component in a different part of the DOM

To enable test environment, set env to test:

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

function Demo() {
  return <MantineProvider env="test">{/* Your app here */}</MantineProvider>;
}

New use-file-dialog allows capturing one or more files from the user without file input element:

import { Button, Group, List } from '@mantine/core';
import { useFileDialog } from '@mantine/hooks';

function Demo() {
  const fileDialog = useFileDialog();

  const pickedFiles = Array.from(fileDialog.files || []).map((file) => (
    <List.Item key={file.name}>{file.name}</List.Item>
  ));

  return (
    <div>
      <Group>
        <Button onClick={fileDialog.open}>Pick files</Button>
        {pickedFiles.length > 0 && (
          <Button variant="default" onClick={fileDialog.reset}>
            Reset
          </Button>
        )}
      </Group>
      {pickedFiles.length > 0 && <List mt="lg">{pickedFiles}</List>}
    </div>
  );
}

Remix is deprecated, the documentation related to Remix integration was removed, use React Router instead. To simplify maintenance, Remix/React Router templates were archived and will not be updated.

• I get hydration warning about data-mantine-color-scheme attribute, what does it mean? question
• How can I apply styles to all Mantine components? question

• Tooltip now supports customizing middlewares
• ScrollArea now supports overscrollBehavior prop
• Affix now supports theme.spacing values for position prop
• Anchor now supports underline="not-hover" option to display underline only when the link is not hovered

• [@mantine/core] Remove use client from isLightColor function
• [@mantine/core] TextInput: Fix autocomplete for variant prop not working
• [@mantine/carousel] Fix aria-hidden warning displayed in Chrome console when indicator is clicked (#7414)
• [@mantine/core] Fix clear button overlaying input content in Autocomplete and other similar components (#7431)
• [@mantine/core] Combobox: Fix incorrect dropdown padding when used with ScrollArea (#7450)
• [@mantine/core] Fix 0 gradient deg value not working correctly (#7444)
• [@mantine/core] ScrollArea: Fix user-select being left as none after interaction with scrollbar in some edge cases (#7423)
• [@mantine/dates] DateInput: Fix infinite loop in Safari (#7442)

• @kingflamez made their first contribution in https://github.com/mantinedev/mantine/pull/7442
• @webkonstantin made their first contribution in https://github.com/mantinedev/mantine/pull/7423
• @marcinlukanus made their first contribution in https://github.com/mantinedev/mantine/pull/7444

Full Changelog: https://github.com/mantinedev/mantine/compare/7.16.2...7.16.3

• [@mantine/core] Tooltip: Migrate from deprecated useDelayGroupContext hook to useDelayGroup
• [@mantine/core] Tabs: Fix tabIndex={0} set on Tabs.Tab being ignored (#7407)
• [@mantine/core] Fix chevron icon not being clickable in Select and MultiSelect components (#7395)
• [@mantine/dates] MonthPicker: Fix infinite useEffect with use-form in some cases (#7389)
• [@mantine/hooks] use-hotkeys: Add better support for non-QUERTY keyboards (#7390)
• [@mantine/dates] DateTimePicker: Fix timezone conversion being applied twice (#7400)
• [@mantine/hooks] Fix potential dangerous access of ref value in useEffect cleanup (#7404)

• @ohansFavour made their first contribution in https://github.com/mantinedev/mantine/pull/7402
• @danpeavey-classdojo made their first contribution in https://github.com/mantinedev/mantine/pull/7390
• @openscript made their first contribution in https://github.com/mantinedev/mantine/pull/7389

Full Changelog: https://github.com/mantinedev/mantine/compare/7.16.1...7.16.2

• [@mantine/core] Menu: Add withInitialFocusPlaceholder prop support
• [@mantine/core] Slider: Fix onChangeEnd being called when disabled prop is set
• [@mantine/core] Add option to customize chevron color with chevronColor prop in Select and MultiSelect components
• [@mantine/core] Fix incorrect styles of nested tables (#7354)
• [@mantine/core]: NumberInput: Fix onChange being called in onBlur if the value has not been changed (#7383)
• [@mantine/core] Menu: Add data-disabled prop handling to Menu.Item component (#7377)
• [@mantine/form] Fix incorrect values handling in form.resetDirty (#7373)
• [@mantine/chart] AreaChart: Fix gridColor and textColor props being passed as attributes to the DOM node (#7378)
• [@mantine/hooks] use-in-viewport: Fix tracking being stopped when used with a dnd library (#7359)
• [@mantine/core] MantineProvider: Fix jest tests not running in case there is incorrect window.matchMedia polyfill implementation (#7360)
• [@mantine/core] Modal: Fix Escape key not working in old Safari versions (#7358)

• @kidonng made their first contribution in https://github.com/mantinedev/mantine/pull/7364
• @Benjaminsson made their first contribution in https://github.com/mantinedev/mantine/pull/7360
• @cameronrdecker made their first contribution in https://github.com/mantinedev/mantine/pull/7380
• @tomrehnstrom made their first contribution in https://github.com/mantinedev/mantine/pull/7373

Full Changelog: https://github.com/mantinedev/mantine/compare/7.16.0...7.16.1

View changelog with demos on mantine.dev website

New use-scroll-spy hook tracks scroll position and returns index of the element that is currently in the viewport. It is useful for creating table of contents components (like in mantine.dev sidebar on the right side) and similar features.

import { Text, UnstyledButton } from '@mantine/core';
import { useScrollSpy } from '@mantine/hooks';

function Demo() {
  const spy = useScrollSpy({
    selector: '#mdx :is(h1, h2, h3, h4, h5, h6)',
  });

  const headings = spy.data.map((heading, index) => (
    <li
      key={heading.id}
      style={{
        listStylePosition: 'inside',
        paddingInlineStart: heading.depth * 20,
        background: index === spy.active ? 'var(--mantine-color-blue-light)' : undefined,
      }}
    >
      <UnstyledButton onClick={() => heading.getNode().scrollIntoView()}>
        {heading.value}
      </UnstyledButton>
    </li>
  ));

  return (
    <div>
      <Text>Scroll to heading:</Text>
      <ul style={{ margin: 0, padding: 0 }}>{headings}</ul>
    </div>
  );
}

New TableOfContents component is built on top of use-scroll-spy hook and can be used to create table of contents components like the one on the right side of mantine.dev documentation sidebar:

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

function Demo() {
  return (
    <TableOfContents
      variant="filled"
      color="blue"
      size="sm"
      radius="sm"
      scrollSpyOptions={{
        selector: '#mdx :is(h1, h2, h3, h4, h5, h6)',
      }}
      getControlProps={({ data }) => ({
        onClick: () => data.getNode().scrollIntoView(),
        children: data.value,
      })}
    />
  );
}

New Input.ClearButton component can be used to add clear button to custom inputs based on Input component. size of the clear button is automatically inherited from the input:

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

function Demo() {
  const [value, setValue] = useState('clearable');

  return (
    <Input
      placeholder="Clearable input"
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
      rightSection={value !== '' ? <Input.ClearButton onClick={() => setValue('')} /> : undefined}
      rightSectionPointerEvents="auto"
      size="sm"
    />
  );
}

Popover and other components based on it now support withOverlay prop:

import { Anchor, Avatar, Group, Popover, Stack, Text } from '@mantine/core';

function Demo() {
  return (
    <Popover
      width={320}
      shadow="md"
      withArrow
      withOverlay
      overlayProps={{ zIndex: 10000, blur: '8px' }}
      zIndex={10001}
    >
      <Popover.Target>
        <UnstyledButton style={{ zIndex: 10001, position: 'relative' }}>
          <Avatar src="https://avatars.githubusercontent.com/u/79146003?s=200&v=4" radius="xl" />
        </UnstyledButton>
      </Popover.Target>
      <Popover.Dropdown>
        <Group>
          <Avatar src="https://avatars.githubusercontent.com/u/79146003?s=200&v=4" radius="xl" />
          <Stack gap={5}>
            <Text size="sm" fw={700} style={{ lineHeight: 1 }}>
              Mantine
            </Text>
            <Anchor href="https://x.com/mantinedev" c="dimmed" size="xs" style={{ lineHeight: 1 }}>
              @mantinedev
            </Anchor>
          </Stack>
        </Group>

        <Text size="sm" mt="md">
          Customizable React components and hooks library with focus on usability, accessibility and
          developer experience
        </Text>

        <Group mt="md" gap="xl">
          <Text size="sm">
            <b>0</b> Following
          </Text>
          <Text size="sm">
            <b>1,174</b> Followers
          </Text>
        </Group>
      </Popover.Dropdown>
    </Popover>
  );
}

You can now use container queries in Carousel component. With container queries, all responsive values are adjusted based on the container width, not the viewport width.

Example of using container queries. To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right corner of the demo:

import { Carousel } from '@mantine/carousel';

function Demo() {
  return (
    // Wrapper div is added for demonstration purposes only,
    // It is not required in real projects
    <div
      style={{
        resize: 'horizontal',
        overflow: 'hidden',
        maxWidth: '100%',
        minWidth: 250,
        padding: 10,
      }}
    >
      <Carousel
        withIndicators
        height={200}
        type="container"
        slideSize={{ base: '100%', '300px': '50%', '500px': '33.333333%' }}
        slideGap={{ base: 0, '300px': 'md', '500px': 'lg' }}
        loop
        align="start"
      >
        <Carousel.Slide>1</Carousel.Slide>
        <Carousel.Slide>2</Carousel.Slide>
        <Carousel.Slide>3</Carousel.Slide>
        {/* ...other slides */}
      </Carousel>
    </div>
  );
}

RangeSlider component now supports restrictToMarks prop:

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

function Demo() {
  return (
    <Stack>
      <Slider
        restrictToMarks
        defaultValue={25}
        marks={Array.from({ length: 5 }).map((_, index) => ({ value: index * 25 }))}
      />

      <RangeSlider
        restrictToMarks
        defaultValue={[5, 15]}
        marks={[
          { value: 5 },
          { value: 15 },
          { value: 25 },
          { value: 35 },
          { value: 70 },
          { value: 80 },
          { value: 90 },
        ]}
      />
    </Stack>
  );
}

Pagination component now supports withPages prop which allows hiding pages controls and displaying only previous and next buttons:

import { useState } from 'react';
import { Group, Pagination, Text } from '@mantine/core';

const limit = 10;
const total = 145;
const totalPages = Math.ceil(total / limit);

function Demo() {
  const [page, setPage] = useState(1);
  const message = `Showing ${limit * (page - 1) + 1} – ${Math.min(total, limit * page)} of ${total}`;

  return (
    <Group justify="flex-end">
      <Text size="sm">{message}</Text>
      <Pagination total={totalPages} value={page} onChange={setPage} />
    </Group>
  );
}

use-form hook now supports touchTrigger option that allows customizing events that change touched state. It accepts two options:

• change (default) – field will be considered touched when its value changes or it has been focused
• focus – field will be considered touched only when it has been focused

Example of using focus trigger:

import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { a: 1 },
  touchTrigger: 'focus',
});

form.isTouched('a'); // -> false
form.setFieldValue('a', 2);
form.isTouched('a'); // -> false

// onFocus is called automatically when the user focuses the field
form.getInputProps('a').onFocus();
form.isTouched('a'); // -> true

• Native browser validation does not work in some components, what should I do? question
• My styles are broken with disabled JavaScript. What should I do? question
• How can I add fuzzy search to Select component? question
• use-local-storage hook returns real value only after mounting, is it a bug? question
• How can I upload files from Dropzone component? question

• Autocomplete now supports clearable prop
• where-* mixins documentation has been added
• use-local-storage hook now supports sync option which allows disabling synchronization between browser tabs