8.3.16

What's Changed

• [@mantine/modals] Fix onClose being called multiple times (#8727)
• [@mantine/core] Tooltip: Fix component not throwing erro when used with string (#8694)
• [@mantine/core] NumberInput: Fix incorrect decimal separator parsing in onPaste
• [@mantine/core] AppShell: Fix layout="alt" not working with mode="static"
• [@mantine/stotlight] Fix actions list being rendered when nothing found message was not set (#8592)

Full Changelog: 8.3.15...8.3.16

8.3.15

What's Changed

• [@mantine/dropzone] Update react-dropzone to 15.0.0 (#8667)
• [@mantine/core]TagsInput: Fix duplicate checking bypass with splitChars (#8686)
• [@mantine/charts] Allow ChartTooltip valueFormatter to return React.ReactNode (#8650)
• [@mantine/dates] DatePicker: Fix placeholder selector missing in Styles API (#8663)
• [@mantine/core] Add missing factory types exports (#8677)
• [@mantine/core] Fix inert attribute being ignored by Checkbox and Switch components (#8668)

Full Changelog: 8.3.14...8.3.15

9.0.0-alpha.0

View changelog with demos on alpha.mantine.dev website

Alpha version

This is the first alpha version of Mantine 9. You are welcome to review changes and provide feedback.

Support Mantine development

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

Migration guide

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

Peer dependencies requirements updates

Starting from Mantine 9.0, the following dependencies are required:

• React 19+ for all @mantine/* packages
• Tiptap 3+ for @mantine/tiptap (migration guide)
• Recharts 3+ for @mantine/charts (no migration required)

Namespace types exports

All Mantine components and hooks now provide namespace exports for related types.
For example, use-disclosure hook types can now be accessed like this:

import { useDisclosure } from '@mantine/hooks';

const options: useDisclosure.Options = {
  onOpen: () => console.log('open'),
  onClose: () => console.log('close'),
};

function Demo() {
  const [opened, handlers] = useDisclosure(options);
}

Example of using namespace types with Button props type:

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

const buttonProps: Button.Props = {
    variant: 'filled',
    size: 'md',
    disabled: false,
  };

function Demo() {
  return <Button {...buttonProps}>Click me</Button>;
}

New @mantine/schedule package

New @mantine/schedule package provides a complete set of
calendar scheduling components for React applications. It includes multiple view levels,
drag-and-drop event management, and extensive customization options.

Components included:

• Schedule – unified container component that combines all views with built-in navigation and view switching
• DayView – single day view with configurable time slots, all-day event section, current time indicator, and business hours highlighting
• WeekView – weekly calendar grid with time slots, week numbers, weekend day toggling, and multi-day event spanning
• MonthView – monthly calendar grid with event overflow handling, outside days display, and week numbers
• YearView – 12-month year overview organized by quarters with day-level event indicators
• MobileMonthView – mobile-optimized month view with event details panel for the selected day

Key features:

• Drag and drop – drag events to reschedule them across time slots and days. Supports conditional dragging with canDragEvent callback, and drag-to-select time ranges with withDragSlotSelect
• Multiple interaction modes – default mode enables all interactions (click, drag, navigation), static mode renders a read-only calendar
• Responsive layout – layout="responsive" automatically switches to YearView and MobileMonthView on smaller screens
• Custom event rendering – use renderEventBody or renderEvent to fully customize how events are displayed in all views
• Time configuration – configurable start/end times, time slot intervals, time label formats, and business hours highlighting
• Internationalization – full label customization through the labels prop, locale-aware date formatting via dayjs
• Click handlers – onTimeSlotClick, onAllDaySlotClick, onDayClick, and onEventClick for building interactive scheduling interfaces
• Styles API – full support for classNames, styles, and unstyled props, along with CSS variables for theming

To get started, follow the getting started guide.

Collapse horizontal orientation

Collapse component now supports horizontal orientation:

import { Button, Collapse, Stack, Typography } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [expanded, handlers] = useDisclosure(false);

  return (
    <Stack h={240} align="flex-start">
      <Button onClick={handlers.toggle} w="fit-content">
        {expanded ? 'Collapse' : 'Expand'}
      </Button>

      <Collapse expanded={expanded} orientation="horizontal">
        <Typography bg="var(--mantine-color-blue-light)" p="xs" bdrs="md" w={200}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua.
        </Typography>
      </Collapse>
    </Stack>
  );
}

use-collapse and use-horizontal-collapse hooks

New use-collapse hook is the hook version of Collapse component.
It allows animation of height from 0 to auto and vice versa.

import { Button, Typography } from '@mantine/core';
import { useCollapse, useDisclosure } from '@mantine/hooks';

function Demo() {
  const [expanded, handlers] = useDisclosure(false);
  const getCollapseProps = useCollapse({ expanded });

  return (
    <>
      <Button onClick={handlers.toggle} mb="md">
        {expanded ? 'Collapse' : 'Expand'}
      </Button>

      <div {...getCollapseProps()}>
        <Typography bg="var(--mantine-color-blue-light)" p="xs" bdrs="md">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Typography>
      </div>
    </>
  );
}

use-horizontal-collapse works the same way as use-collapse but animates width instead of height:

import { Button, Stack, Typography } from '@mantine/core';
import { useDisclosure, useHorizontalCollapse } from '@mantine/hooks';

function Demo() {
  const [expanded, handlers] = useDisclosure(false);
  const { getCollapseProps } = useHorizontalCollapse({ expanded });

  return (
    <Stack h={240}>
      <Button onClick={handlers.toggle} w="fit-content">
        {expanded ? 'Collapse' : 'Expand'}
      </Button>

      <div {...getCollapseProps()}>
        <Typography bg="var(--mantine-color-blue-light)" p="xs" bdrs="md" w={200}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua.
        </Typography>
      </div>
    </Stack>
  );
}

use-floating-window hook

New use-floating-window hook allows creating floating draggable
elements:

import { Button, CloseButton, Group, Paper, Portal, Text } from '@mantine/core';
import { useDisclosure, useFloatingWindow } from '@mantine/hooks';

function Demo() {
  const [visible, handlers] = useDisclosure();
  const floatingWindow = useFloatingWindow({
    constrainToViewport: true,
    constrainOffset: 20,
    excludeDragHandleSelector: 'button',
    initialPosition: { top: 300, left: 20 },
  });

  return (
    <>
      <Button onClick={handlers.toggle} variant="default">
        {visible ? 'Hide' : 'Show'} floating window
      </Button>

      {visible && (
        <Portal>
          <Paper
            w={280}
            p="md"
            withBorder
            radius="md"
            pos="fixed"
            style={{ cursor: 'move', transition: 'box-shadow 70ms ease', zIndex: 400 }}
            shadow={floatingWindow.isDragging ? 'md' : undefined}
            ref={floatingWindow.ref}
          >
            <Group justify="space-between" mb="md">
              <Text>Usage demo</Text>
              <CloseButton onClick={handlers.close} />
            </Group>
            <Text fz="sm">This is a floating window. You can drag it around.</Text>
          </Paper>
        </Portal>
      )}
    </>
  );
}

FloatingWindow component

FloatingWindow provides component API for use-floating-window hook:

import { Button, CloseButton, FloatingWindow, Group, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [visible, handlers] = useDisclosure();

  return (
    <>
      <Button onClick={handlers.toggle} variant="default">
        {visible ? 'Hide' : 'Show'} floating window
      </Button>

      {visible && (
        <FloatingWindow
          w={280}
          p="md"
          withBorder
          radius="md"
          excludeDragHandleSelector="button"
          initialPosition={{ top: 300, left: 20 }}
          style={{ cursor: 'move' }}
        >
          <Group justify="space-between" mb="md">
            <Text>Usage demo</Text>
            <CloseButton onClick={handlers.close} />
          </Group>
          <Text fz="sm">This is a floating window. You can drag it around.</Text>
        </FloatingWindow>
      )}
    </>
  );
}

OverflowList component

New OverflowList component displays list of items and collapses the overflowing items into a single element:

...

8.3.14

What's Changed

• [@mantine/core] Switch: Fix checkbox not being recognized by Playwright (#8370, #8645)
• [@mantine/core] MultiSelect: Fix click on chevron not opening dropdown when clearable is enabled (#8641)
• [@mantine/modals] Fix types of context modals inferred incorrectly (#8625)
• [@mantine/core] MultiSelect: Fix clear button overlapping with pills (#8634)

New Contributors

• @ckhe1215 made their first contribution in #8634
• @RaphalRiad made their first contribution in #8625

Full Changelog: 8.3.13...8.3.14

8.3.13

What's Changed

• [@mantine/core] Add openOnFocus prop to Combobox based components (#5893, #8623)
• [@mantine/dates] TimePicker: Fix clearing in uncontrolled mode not updating to empty value (#8622)
• [@mantine/core] ScrollArea: Fix Shift + wheel scroll not working correctly on Windows (#8619)
• [@mantine/core] Add selectFirstOptionOnDropdownOpen to Combobox based components (#8597)
• [@mantine/core] ScrollArea: Fix onBottomReached not being called when used in zoomed-in viewports (#8616)
• [@mantine/core] Popover: Fix aria-controls attribute being set on the target element when the dropdown is not mounted (#8595)
• [@mantine/core] RangeSlider: Fix incorrect Styles API name (#8601)
• [@mantine/core] ScrollArea: Fix overscrollBehavior prop not working in ScrollArea.Autosize component (#8611)

New Contributors

• @AgentRBY made their first contribution in #8601
• @jonathanhuynh70 made their first contribution in #8595
• @robert-j-webb made their first contribution in #8616
• @Alan-Gomes made their first contribution in #8597
• @pggggggggh made their first contribution in #8622
• @harry-ignite made their first contribution in #8623

Full Changelog: 8.3.12...8.3.13

8.3.12

What's Changed

• [@mantine/core] Popover: Fix flip logic being calculated after shift (#8590)
• [@mantine/tiptap] Fix bubble menu being overlapped by the toolbar (#8589)
• [@mantine/core] ScrollArea: Fix incorrect overscroll behavior when scrollbar explicitly set on one side (#8591)
• [@mantine/core] AppShell: Add static mode support for nested app shells

New Contributors

• @Hosung99 made their first contribution in #8591
• @kykim00 made their first contribution in #8590

Full Changelog: 8.3.11...8.3.12

8.3.11

What's Changed

• [@mantine/core] Combobox: Fix dropdown not being positioned correctly when element is initially rendered outside the viewport (#8520, #8577)
• [@mantine/core] NumberInput: Fix decimal separator being removed with Backspace key (#8571)
• [@mantine/code-highlight] Add CodeHighlightAdapter type export (#8581)
• [@mantine/form] Add LooseKeys type export (#8543)
• [@mantine/core] FileInput: Fix incorrect default size
• [@mantine/hooks] use-focus-within: Fix stale closure in onFocus/onBlur callbacks (#8528)
• [@mantine/dates] TimePicker: Fix AM/PM input displaying arbitrary text (#8532)
• [@mantine/core] Notification: Fix incorrect variant prop type (#8537)
• [@mantine/carousel] Update controls DOM order to have proper tab order

New Contributors

• @jakub-gaik made their first contribution in #8537
• @muhammedaksam made their first contribution in #8532
• @ReemX made their first contribution in #8543
• @iamdevlinph made their first contribution in #8573
• @akash191095 made their first contribution in #8568

Full Changelog: 8.3.10...8.3.11

8.3.10

What's Changed

• [@mantine/hooks] use-focus-within: Fix event handlers not being cleaned up properly (#8507)
• [@mantine/core] Menu: Fix focus not being returned to the target element when the dropdown is closed (#8517)
• [@mantine/core] List: Fix incorrect marker gap with icon prop (#8519)
• [@mantine/core] Fix some global styles not being applied to shadow DOM :host (#8504)
• [@mantine/core] Fix SSR-related errors in Tooltip and Popover.Target when the children are defined with React.lazy (#8522)
• [@mantine/tiptap] Fix missing z-index on the toolbar
• [@mantine/form] Add FormArrayElement type export (#8486)
• [@mantine/dates] Fix children override not working in MonthsList/YearsList getYearProps/getMonthProps functions (#8488)
• [@mantine/emotion] Improve CSSObject type in createStyles (#8500)
• [@mantine/core] Input: Fix description having incorrect cursor styles (#8503)
• [@mantine/hooks] use-in-viewport: Fix incorrect entry cheching in some cases (#8509)
• [@mantine/core] Popover: Fix incorrect dropdown position when the target element is not initially within the viewport (#8411)
• [@mantine/core] Fix incorrectly inherited pointer prop type from base input in some components

New Contributors

• @spalt08 made their first contribution in #8509
• @radui1398 made their first contribution in #8503
• @MehdiAlipooor made their first contribution in #8488

Full Changelog: 8.3.9...8.3.10

8.3.9

What's Changed

• [@mantine/core] ColorInput: Fix incorrect action icon size (#8481)
• [@mantine/form] Fix insertListItem and replaceListItem handlers not being type safe (#8478)
• [@mantine/dates] DatePickerInput: Fix placeholder Styles API selector not working (#8405)
• [@mantine/core] ColorInput: Fix incorrect font-size if size prop not set explicitly (#8472)
• [@mantine/emotion] Add mergeSx utility function (#8471)
• [@mantine/core] ActionIcon: Fix incorrect disabled state background-color for gradient variant
• [@mantine/modals] Fix breaking changes accidentally introduced in the previous patch (#8476)
• [@mantine/core] Combobox: Add withAlignedLabels prop support to offset selected check icon in the dropdown options (#8391)
• [@mantine/core] Badge: Fix circle prop not working when radius prop is set explicitly (#8466)
• [@mantine/core] Checkbox: Fix incorrect indeterminate state calculation (#8460)
• [@mantine/core] Radio: Fix Radio.Group switching from uncontrolled to controlled mode when value is explicitly set (#8453)

New Contributors

• @semimikoh made their first contribution in #8466
• @oguzgelal made their first contribution in #8471
• @Copilot made their first contribution in #8478

Full Changelog: 8.3.8...8.3.9

8.3.8

What's Changed

• [@mantine/modals] Improve types of context modals (#8439)
• [@mantine/core] Combobox: Fix keyboard interactions not working when used in shadow DOM (#8438)
• [@mantine/core] NumberInput: Fix , decimal separator not being converted to . when entering value from mobile keyboard
• [@mantine/core] NumberInput: Fix incorrect keyboard displayed on iOS 26
• [@mantine/charts] Add cellProps prop support to DonutChart and PieChart (#8444)
• [@mantine/core] Alert: Allow overriding role attribute (#8447)
• [@mantine/core] Menu: Add openDelay prop support to Menu.Sub component (#8437)

New Contributors

• @ScotchAndSoda made their first contribution in #8444
• @justinwhall made their first contribution in #8438

Full Changelog: 8.3.7...8.3.8