# Mantine changelog

> A React component and hooks library with dark mode and accessibility built in.

- Vendor: Mantine
- Category: Frameworks & Libraries
- Official site: https://mantine.dev
- Tracked by: What's New (https://whatsnew.fyi/product/mantine)
- Harvested from: GitHub (mantinedev/mantine)
- Entries below: 11 (newest first)

What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog.

Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'.

## Releases

### 9.5.1

- Date: 2026-08-02
- Version: 9.5.1
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.5.1
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.5.1

- **fixed** — Fix tiptap controls being initially disabled before element is focused
- **fixed** — Fix tiptap source code control wrapping content with extra p tag
- **added** — Allow use-scroll-spy hook usage with refs
- **added** — Add fullWidth prop support to ColorInput
- **fixed** — Fix incorrect indeterminate aria attributes handling in Checkbox.Card
- **fixed** — Fix FloatingIndicator position and size calculation under scaled ancestors
- **added** — Add interactive prop support to Tooltip
- **added** — Add safe area polygon support to Cascader
- **added** — Add option to change whether the visibility toggle is focusable in PasswordInput
- **added** — Add option to add second y axis to ScatterChart
- **added** — Add renderDay prop support to YearView
- **added** — Add option to hide weekend days in YearView
- **fixed** — Fix InputWrapper component: div triggering typescript error if passed to descriptionProps
- **added** — Add option to resize events in ResourcesMonthView
- **added** — Add support for onSizeChange and onResizeStart props to FloatingWindow

- `[@mantine/tiptap]` Fix controls being initially disabledbefore element is focused
- `[@mantine/tiptap]` Fix source code control wrapping content with extra p tag
- `[@mantine/hooks]` use-scroll-spy: Allow usage with refs (#9025)
- `[@mantine/core]` ColorInput: Add support for fullWidth prop (#9061)
- `[@mantine/core]` Checkbox: Fix incottect indeterminate aria attributes handling in Checkbox.Card (#9095)
- `[@mantine/core]` FloatingIndicator: Fix position and size calculation under scaled ancestors (#9071)
- `[@mantine/core]` Tooltip: Add interactive prop support (#9072)
- `[@mantine/core]` Cascader: Add safe area polygon support
- `[@mantine/core]` PasswordInput: Add option to change whether the visibility toggle is focusable (#9090)
- `[@mantine/charts]` ScatterChart: Add option to add second y axis
- `[@mantine/schedule]` YearView: Add `renderDay` prop support
- `[@mantine/schedule]` YearView: Add option to hide weekend days
- `[@mantine/core]` InputWrapper: Fix `component: div` triggering typescript error if passed to `descriptionProps`
- `[@mantine/schedule]` ResourcesMonthView: Add option to resize events
- `[@mantine/core]` FloatingWindow: Add support for  `onSizeChange` and `onResizeStart` props (#9085)

### 9.5.0 — 9.5.0 🤖

- Date: 2026-07-27
- Version: 9.5.0
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.5.0
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.5.0

- **changed** — Migrate linting and formatting toolchain from ESLint and Prettier to oxc, with oxlint as the linter and oxfmt as the formatter
- **added** — Add oxc-config-mantine package as a replacement for eslint-config-mantine for shared code style configuration
- **added** — Add withNativeLevelSelect prop to DatePicker and all other date picker components to replace calendar header level button with native select elements
- **added** — Add yearsSelectRange prop to date picker components for configuring the range of years available in the native select
- **added** — Add opposite prop to Timeline.Item component to render content on the opposite side of the timeline
- **added** — Add alternate prop to Timeline.Item component to switch the position of content and opposite

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/9-5-0)

##### Support Mantine development

You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
All funds are used to improve Mantine and create new features and components.

##### Migration to oxc

Mantine has migrated its linting and formatting toolchain from ESLint and Prettier
to [oxc](https://oxc.rs) – [oxlint](https://www.npmjs.com/package/oxlint) is now used
as the linter and [oxfmt](https://www.npmjs.com/package/oxfmt) as the formatter. Both
tools are written in Rust and are significantly faster than their predecessors, which
makes linting and formatting the entire codebase almost instant.

The shared configuration is available as a new
[oxc-config-mantine](https://mantine.dev/oxc-config-mantine) package (a replacement for the previous
`eslint-config-mantine`). You can use it in your own projects to follow the same
code style and conventions as Mantine.

##### Native level select in date pickers

[DatePicker](https://mantine.dev/dates/date-picker) and all other date picker components ([DatePickerInput](https://mantine.dev/dates/date-picker-input),
[MonthPicker](https://mantine.dev/dates/month-picker), [YearPicker](https://mantine.dev/dates/year-picker), [DateTimePicker](https://mantine.dev/dates/date-time-picker), etc.)
now support the `withNativeLevelSelect` prop. When enabled, it replaces the calendar header level button
with native `<select>` elements, making it easy to quickly navigate to a specific month and year.

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

function Demo() {
  return <DatePicker withNativeLevelSelect yearsSelectRange={[2020, 2035]} />;
}
```

##### Timeline opposite and alternate content

[Timeline](https://mantine.dev/core/timeline) `Timeline.Item` component now supports the `opposite` prop that allows
rendering content on the opposite side of the timeline. When any item has the `opposite` prop,
the timeline switches to a centered layout with content on both sides of the line.

```tsx
import { Timeline, Text } from '@mantine/core';
import { GitBranchIcon, GitCommitIcon, GitPullRequestIcon, ChatCircleDotsIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <Timeline active={1} bulletSize={24} lineWidth={2}>
      <Timeline.Item
        bullet={<GitBranchIcon size={12} />}
        title="New branch"
        opposite={
          <Text size="sm" c="dimmed">
            2 hours ago
          </Text>
        }
      >
        <Text c="dimmed" size="sm">You&apos;ve created new branch <Text variant="link" component="span" inherit>fix-notifications</Text> from master</Text>
      </Timeline.Item>

      <Timeline.Item
        bullet={<GitCommitIcon size={12} />}
        title="Commits"
        opposite={
          <Text size="sm" c="dimmed">
            52 minutes ago
          </Text>
        }
      >
        <Text c="dimmed" size="sm">You&apos;ve pushed 23 commits to <Text variant="link" component="span" inherit>fix-notifications branch</Text></Text>
      </Timeline.Item>

      <Timeline.Item
        title="Pull request"
        bullet={<GitPullRequestIcon size={12} />}
        lineVariant="dashed"
        opposite={
          <Text size="sm" c="dimmed">
            34 minutes ago
          </Text>
        }
      >
        <Text c="dimmed" size="sm">You&apos;ve submitted a pull request <Text variant="link" component="span" inherit>Fix incorrect notification message (#187)</Text></Text>
      </Timeline.Item>

      <Timeline.Item title="Code review" bullet={<ChatCircleDotsIcon size={12} />}>
        <Text c="dimmed" size="sm"><Text variant="link" component="span" inherit>Robert Gluesticker</Text> left a code review on your pull request</Text>
      </Timeline.Item>
    </Timeline>
  );
}
```

Set the `alternate` prop on individual `Timeline.Item` compon

_[Truncated at 4000 characters — full notes: https://github.com/mantinedev/mantine/releases/tag/9.5.0]_

### 9.4.2

- Date: 2026-07-21
- Version: 9.4.2
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.4.2
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.4.2

- **fixed** — Fix 1-3 minutes events not aligning correctly in ResourcesWeekView and ResourcesDayView
- **fixed** — Fix async validation with debounce on initial keystroke of empty input
- **added** — Add keepMountedMode prop to Modal and Drawer components
- **fixed** — Fix menu requiring two clicks to dismiss after switching menus with hover in Menubar
- **fixed** — Fix breakpoint={0} not working correctly in AppShell
- **fixed** — Fix keyboard navigation not working on Safari in Tree
- **fixed** — Fix autoClose leak in NotificationContainer
- **added** — Add keepMountedMode prop to Collapse
- **fixed** — Fix incorrect withSeconds handling when pasting partial values in TimePicker
- **added** — Add option to customize current time in ResourcesDayView and ResourcesWeekView components
- **added** — Add expand callback to renderNode payload in TreeSelect
- **fixed** — Fix incorrect empty children arrays handling in Tree and TreeSelect
- **fixed** — Fix unstable scrollIntoView for some bundlers
- **added** — Add intervalMinutes more than 60 support to ResourcesDayView and ResourcesWeekView
- **fixed** — Fix incorrect handling of events with small duration in ResourcesWeekView
- **fixed** — Fix events with small durations not being visible in ResourcesDayView

##### What's Changed
- `[@mantine/schedule]` Fix 1-3 minutes events not aligning correctly in ResourcesWeekView and ResourcesDayView (#9057)
- `[@mantine/form]` Fix async validation with debounce on initial keystroke of empty input (#9068)
- `[@mantine/core]` Add `keepMountedMode` prop to Modal and Drawer components (#9056)
- `[@mantine/core]` Menubar: Fix menu requiring two clicks to dismiss after switching menus with hover (#9050)
- `[@mantine/core]` AppShell: Fix `breakpoint={0}` not working correctly (#9042)
- `[@mantine/core]` Tree: Fix keyboard navigation not working on Safari (#9049)
- `[@mantine/notifications]` NotificationContainer: Fix `autoClose` leak (#9048)
- `[@mantine/core]` Collapse: Add `keepMountedMode` prop (#9021)
- `[@mantine/dates]` TimePicker: Fix incorrect `withSeconds` handling when pasting partial values (#9041)
- `[@mantine/schedule]` Add option to customize current time in ResourcesDayView and ResourcesWeekView components
- `[@mantine/core]` TreeSelect: Add `expand` callback to `renderNode` payload
- `[@mantine/core]` Fix incorrect empty children arrays handling in Tree and TreeSelect
- `[@mantine/hooks]` Fix unstable `scrollIntoView` for some bundlers (#9035)
- `[@mantine/schedule]` Add `intervalMinutes` more than 60 support to ResourcesDayView and ResourcesWeekView
- `[@mantine/schedule]` ResourcesWeekView: Fix incorrect handling of events with small duration
- `[@mantine/schedule]` ResourcesDayView: Fix events with small durations not being visible

##### New Contributors
* @saadpocalypse made their first contribution in https://github.com/mantinedev/mantine/pull/9021
* @Arman-Luthra made their first contribution in https://github.com/mantinedev/mantine/pull/9050

**Full Changelog**: https://github.com/mantinedev/mantine/compare/9.4.1...9.4.2

### 9.4.1

- Date: 2026-06-28
- Version: 9.4.1
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.4.1
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.4.1

- **fixed** — Fix some functions in @mantine/form not working correctly with react compiler
- **fixed** — Fix Heatmap values outside the provided domain rendering with no fill
- **fixed** — Fix RollingNumber rendering -0 for values that round to zero
- **fixed** — Fix incorrect marks labels position in Slider in RTL layouts
- **fixed** — Fix use-set and use-map hooks using stale values when used with React compiler
- **added** — Add FormProviderProps type export to @mantine/form
- **fixed** — Fix incorrect multiday events rendering in ResourcesDayView
- **fixed** — Fix TimePicker duration values greater than 9999 hours not working
- **changed** — Mark non-menuitem dropdown children as presentational in Menu
- **fixed** — Fix ref and style props not working in Collapse when transitionDuration is 0
- **fixed** — Fix autosize not working correctly with minRows on initial render in Textarea
- **added** — Add events resizing support to ResourcesWeekView

##### What's Changed
- `[@mantine/form]` Fix some functions not working correctly with react compiler (#9007)
- `[@mantine/charts]` Heatmap: Fix values outside the provided domain rendering with no fill (#8982)
- `[@mantine/core]` RollingNumber: Fix rendering `-0` for values that round to zero (#8983)
- `[@mantine/core]` Slider: Fix incorrect marks labels position in RTL layouts (#8996)
- `[@mantine/hooks]` Fix use-set and use-map hooks using stale values when used with React compiler (#9008)
- `[@mantine/form]` Add `FormProviderProps` type export (#9009)
- `[@mantine/schedule]` ResourcesDayView: Fix incorrect multiday events rendering (#9014)
- `[@mantine/dates]` TimePicker: Fix duration values greater than 9999 hours not working (#9002)
- `[@mantine/core]` Menu: Mark `non-menuitem` dropdown children as presentational (#9004)
- `[@mantine/core]` Collapse: Fix `ref` and `style` props not working when `transitionDuration: 0` (#9013)
- `[@mantine/core]` Textarea: Fix autosize not working correctly with `minRows` on initial render
- `[@mantine/schedule]` ResourcesWeekView: Add events resizing support

##### New Contributors
* @ayu3456 made their first contribution in https://github.com/mantinedev/mantine/pull/9013
* @Sanjays2402 made their first contribution in https://github.com/mantinedev/mantine/pull/9004

**Full Changelog**: https://github.com/mantinedev/mantine/compare/9.4.0...9.4.1

### 9.4.0 — 9.4.0 🥵

- Date: 2026-06-22
- Version: 9.4.0
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.4.0
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.4.0

- **added** — Add ComboboxPopover component for adding a combobox dropdown with selectable options to any button element, supporting single and multiple selection modes
- **added** — Add DataList component for displaying label-value pairs as a semantic description list with support for vertical and horizontal orientations and dividers
- **added** — Add EmptyState component for displaying placeholders in no data situations with support for icon, title, description, and call-to-action elements
- **added** — Add Menubar component for desktop-application style menu bar with horizontal row of top-level menu triggers and arrow key navigation

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/9-4-0)

##### Support Mantine development

You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
All funds are used to improve Mantine and create new features and components.

##### ComboboxPopover component

New [ComboboxPopover](https://mantine.dev/core/combobox-popover) component allows adding a combobox dropdown
with selectable options to any button element. Unlike `Select` and `MultiSelect`, it does not
render an input – you provide your own target element via `ComboboxPopover.Target`. Supports
single and multiple selection modes with the same `data` format as `Select`.

```tsx
import { useState } from 'react';
import { Button, ComboboxPopover } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <ComboboxPopover
      data={['React', 'Angular', 'Vue', 'Svelte']}
      value={value}
      onChange={setValue}
    >
      <ComboboxPopover.Target>
        <Button variant="default" miw={200}>{value || 'Select framework'}</Button>
      </ComboboxPopover.Target>
    </ComboboxPopover>
  );
}
```

##### DataList component

New [DataList](https://mantine.dev/core/data-list) component displays label-value pairs as a semantic description
list using `dl`, `dt`, and `dd` HTML elements. Supports vertical and horizontal orientations,
dividers between items, and all standard Mantine features like Styles API and size prop.

```tsx
import { DataList } from '@mantine/core';

const data = [
  { label: 'Name', value: 'John Doe' },
  { label: 'Email', value: 'john@example.com' },
  { label: 'Role', value: 'Software Engineer' },
  { label: 'Location', value: 'San Francisco, CA' },
];

function Demo() {
  return (
    <DataList size="md" orientation="vertical" withDivider={false}>
      {data.map((item) => (
        <DataList.Item key={item.label}>
          <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
          <DataList.ItemValue>{item.value}</DataList.ItemValue>
        </DataList.Item>
      ))}
    </DataList>
  );
}
```

##### EmptyState component

New [EmptyState](https://mantine.dev/core/empty-state) component displays a placeholder for "no data" situations:
empty search results, empty tables and lists, first-run states or error illustrations with an
optional call to action. It can be used with `icon`, `title` and `description` shorthand props
or with `EmptyState.Indicator`, `EmptyState.Title`, `EmptyState.Description` and
`EmptyState.Actions` compound components for full control.

```tsx
import { Button, EmptyState } from '@mantine/core';
import { MagnifyingGlassIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <EmptyState>
      <EmptyState.Indicator>
        <MagnifyingGlassIcon />
      </EmptyState.Indicator>
      <EmptyState.Title>No results found</EmptyState.Title>
      <EmptyState.Description>
        We couldn't find anything matching your search. Try adjusting your filters or searching with
        different keywords to see more results.
      </EmptyState.Description>
      <EmptyState.Actions>
        <Button variant="default">Reset filters</Button>
        <Button variant="default">Create new</Button>
      </EmptyState.Actions>
    </EmptyState>
  );
}
```

##### Menubar component

New [Menubar](https://mantine.dev/core/menubar) component adds a desktop-application style menu bar: a horizontal row
of top-level menu triggers (File, Edit, View, …) where each trigger opens a dropdown. Arrow keys
move between the top-level menus, and once one menu is opened, moving to a sibling opens it
immediately. `Menubar` is built on top of `Menu` and follows the WAI-ARIA menubar pattern.

```tsx
import { Menu, Menubar, Text } from '@mantine/core';

function Demo() {
  return (
    <Menubar>
      <Menubar.Men

_[Truncated at 4000 characters — full notes: https://github.com/mantinedev/mantine/releases/tag/9.4.0]_

### 9.3.2

- Date: 2026-06-16
- Version: 9.3.2
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.3.2
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.3.2

- **fixed** — Allow undefined className with TypeScript exactOptionalPropertyTypes
- **fixed** — TimePicker: Allow entering 01-09 hours over a selected 00 value
- **fixed** — Fix cli flags not being handled correctly in mcp-server
- **fixed** — Combobox: Fix default options rendering not fully working with some components combination
- **fixed** — SankeyChart: Fix incorrect color resolving
- **fixed** — DatePickerPicker: Fix range presets ignoring specified time
- **fixed** — DayView: Fix double top border when events are present
- **added** — TimePicker: Add closeDropdownOnPresetSelect prop support
- **fixed** — TimePicker: Fix input getting stuck at maximum value when typing at the last spin input
- **fixed** — PasswordInput: Fix sections misplaced when dir overrides parent direction
- **added** — Splitter: Add option to reset on double click
- **fixed** — Popover: Fix dropdown position not updating when page is zoomed
- **fixed** — Text: Fix incorrect default textWrap value
- **fixed** — Checkbox: Fix readOnly prop not working correctly for controlled checkbox
- **fixed** — Textarea: Fix autosize textarea not growing when resized within Splitter

##### What's Changed
- `[@mantine/core]` Allow undefined className with TypeScript `exactOptionalPropertyTypes` (#8978)
- `[@mantine/dates]` TimePicker: Allow entering 01-09 hours over a selected 00 value (#8970)
- `[@mantine/mcp-server]` Fix cli flags not being handled correctly (#8966)
- `[@mantine/core]` Combobox: Fix default options rendering not fully working with some components combination (#8979)
- `[@mantine/charts]` SankeyChart: Fix incorrect color resolving (#8973)
- `[@mantine/dates]` DatePickerPicker: Fix range presets ignoring specified time (#8980)
- `[@mantine/schedule]` DayView: Fix double top border when events are present
- `[@mantine/dates]` TimePicker: Add `closeDropdownOnPresetSelect` prop support
- `[@mantine/dates]` TimePicker: Fix input getting stuck at maximum value when typing at the last spin input
- `[@mantine/core]` PasswordInput: Fix sections misplaced when `dir` overrides parent direction (#8936)
- `[@mantine/core]` Splitter: Add option to reset on double click (#8957)
- `[@mantine/core]` Popover: Fix dropdown position not updating when page is zommed
- `[@mantine/core]` Text: Fix incorrect default `textWrap` value (#8961)
- `[@mantine/core]` Checkbox: Fix `readOnly` prop not working correctly for controlled checkbox (#8960)
- `[@mantine/core]` Textarea: Fix autosize textarea not growing when resized within Splitter (#8956)

##### New Contributors
* @SyntaxHQDEV made their first contribution in https://github.com/mantinedev/mantine/pull/8966
* @bensaufley made their first contribution in https://github.com/mantinedev/mantine/pull/8978

**Full Changelog**: https://github.com/mantinedev/mantine/compare/9.3.1...9.3.2

### 9.3.1

- Date: 2026-06-08
- Version: 9.3.1
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.3.1
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.3.1

- **fixed** — Fix stale DOM nodes references not being cleaned up when notifications is closed
- **added** — Add presets support to DateInput
- **fixed** — Fix Collapse keepMounted prop not being set correctly
- **added** — Add controlled state support for Menu.Sub opened state
- **fixed** — Fix incorrect current time indicator position when time does not divide evenly with interval minutes in DayView and WeekView
- **fixed** — Fix Popover context menu not working on iOS touch devices
- **fixed** — Fix SegmentedControl incorrect indicator border-radius calculation
- **fixed** — Fix PinInput incorrect placeholder text centering
- **fixed** — Fix Tree arrow key navigation focusing hidden nodes when keepMounted is set
- **fixed** — Fix MaskInput compatibility issues with uncontrolled use-form
- **fixed** — Fix use-id hook id changing to new value with Activity

##### What's Changed
- `[@mantine/notifications]` Fix stale DOM nodes references not being cleaned up when notifications is closed (#8955)
- `[@mantine/dates]` DateInput: Add `presets` support (#8954)
- `[@mantine/core]` Collapse: Fix `keepMounted` prop not being set correctly (#8949)
- `[@mantine/core]` Menu: Add controlled state support for Menu.Sub opened state
- `[@mantine/schedule]` Fix incorrect current time indicator position when time does not divide evenly with interval minutes in DayView and WeekView (#8945)
- `[@mantine/core]` Popover: Fix context menu not working on iOS touch devices (#8942)
- `[@mantine/core]` SegemntedControl: Fix incorrect indicator border-radius calculation (#8904)
- `[@mantine/core]` PinInput: Fix incorrect placeholder text centering (#8943)
- `[@mantine/core]` Tree: Fix arrow key navigation focusing hidden nodes when keepMounted is set (#8939)
- `[@mantine/core]` MaskInput: Fix compatibility issues with uncontrolled use-form (#8947)
- `[@mantine/hooks]` use-id: Fix id changing to new value with Activity (#8925)

##### New Contributors
* @spokodev made their first contribution in https://github.com/mantinedev/mantine/pull/8925
* @cyphercodes made their first contribution in https://github.com/mantinedev/mantine/pull/8947
* @KasperiP made their first contribution in https://github.com/mantinedev/mantine/pull/8939

**Full Changelog**: https://github.com/mantinedev/mantine/compare/9.3.0...9.3.1

### 9.3.0 — 9.3.0 🥵

- Date: 2026-06-02
- Version: 9.3.0
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.3.0
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.3.0

- **added** — Pagination component now supports layout="responsive" prop that uses CSS container queries to switch between page number buttons and a compact "Page X of Y" label based on available width
- **added** — Text and Blockquote components now support textWrap prop that controls the text-wrap CSS property
- **added** — New use-splitter hook provides resizable split-pane functionality with pointer drag, keyboard navigation, collapsible panels and min/max constraints
- **added** — New Splitter component provides declarative resizable split pane layout built on top of the use-splitter hook
- **added** — CodeHighlight component now supports withLineNumbers prop to display line numbers alongside the code
- **added** — OverflowList component now supports collapseFrom prop that controls from which direction items are collapsed when they overflow

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/9-3-0)

##### Support Mantine development

You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
All funds are used to improve Mantine and create new features and components.

##### Pagination responsive layout

[Pagination](https://mantine.dev/core/pagination/) component now supports `layout="responsive"` prop that uses CSS container
queries to switch between page number buttons and a compact "Page X of Y" label based on the available width.

```tsx
import { Box, Pagination } from '@mantine/core';

function Demo() {
  return (
    <Box style={{ resize: 'horizontal', overflow: 'auto', minWidth: 200, maxWidth: '100%' }}>
      <Pagination total={20} layout="responsive" />
    </Box>
  );
}
```

##### Text textWrap prop

[Text](https://mantine.dev/core/text/) and [Blockquote](https://mantine.dev/core/blockquote/) components now support
`textWrap` prop that controls the `text-wrap` CSS property. You can use it to balance line lengths
or prevent orphaned words in paragraphs.

```tsx
import { Text } from '@mantine/core';

function Demo() {
  return (
    <Text textWrap="wrap">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptatibus inventore iusto
      cum dolore molestiae perspiciatis! Totam repudiandae impedit maxime!
    </Text>
  );
}
```

##### use-splitter hook

New [use-splitter](https://mantine.dev/hooks/use-splitter/) hook provides resizable split-pane functionality
with pointer drag, keyboard navigation (WAI-ARIA Window Splitter pattern), collapsible panels
and min/max constraints:

```tsx
import React from 'react';
import { DotsSixVerticalIcon } from '@phosphor-icons/react';
import { useSplitter } from '@mantine/hooks';

const colors = ['var(--mantine-color-blue-filled)', 'var(--mantine-color-teal-filled)'];
const labels = ['Panel A', 'Panel B'];

function Demo() {
  const splitter = useSplitter({
    panels: [
      { defaultSize: 50, min: 20 },
      { defaultSize: 50, min: 20 },
    ],
  });

  return (
    <div
      ref={splitter.ref}
      style={{
        display: 'flex',
        height: 200,
        borderRadius: 'var(--mantine-radius-md)',
        overflow: 'hidden',
      }}
    >
      {splitter.sizes.map((size, i) => (
        <React.Fragment key={i}>
          {i > 0 && (
            <div
              {...splitter.getHandleProps({ index: i - 1 })}
              style={{
                width: 4,
                flexShrink: 0,
                cursor: 'col-resize',
                touchAction: 'none',
                backgroundColor: 'var(--mantine-color-default-border)',
                position: 'relative',
              }}
            >
              <div
                style={{
                  position: 'absolute',
                  top: '50%',
                  left: '50%',
                  transform: 'translate(-50%, -50%)',
                  width: 8,
                  height: 40,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 'var(--mantine-radius-xs)',
                  backgroundColor: 'var(--mantine-color-default)',
                  border: '1px solid var(--mantine-color-default-border)',
                  color: 'var(--mantine-color-dimmed)',
                }}
              >
                <DotsSixVerticalIcon />
              </div>
            </div>
          )}
          <div
            style={{
              width: `${size}%`,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: colors[i],
              color: 'var(--mantine-color-white)',
              fontWeight: 500,
              whit

_[Truncated at 4000 characters — full notes: https://github.com/mantinedev/mantine/releases/tag/9.3.0]_

### 9.2.2

- Date: 2026-05-27
- Version: 9.2.2
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.2.2
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.2.2

- **fixed** — Pill: Fix incorrect overflow handling
- **fixed** — TimePicker: Fix incorrect am/pm switching in some cases in production builds
- **fixed** — use-mask: Fix undo keyboard shortcut not working
- **fixed** — use-mask: Fix cursor jumping on paste/cut
- **fixed** — Input: Fix sections misplaced when dir overrides parent direction
- **fixed** — Select: Fix clear button not showing for falsy primitive values
- **fixed** — Fix incorrect attributes type in Modal, Drawer and Spotlight
- **fixed** — tiptap: Fix controls throwing errors when editor is destroyed/not initialized
- **added** — Menu: Add option to pass safe area polygon options down to Menu.Sub

##### What's Changed
- `[@mantine/core]` Pill: Fix incorrect overflow handling (#8929)
- `[@mantine/dates]` TimePicker: Fix incorrect am/pm switching in some cases in production builds (#8911)
- `[@mantine/hooks]` use-mask: Fix undo keyboard shortcut not working (#8927)
- `[@mantine/hooks]` use-mask: Fix cursor jumping on paste/cut (#8926)
- `[@mantine/core]` Input: Fix sections misplaced when `dir` overrides parent direction (#8905)
- `[@mantine/core]` Select: Fix clear button not showing for falsy primitive values (#8901)
- `[@mantine/core]` Fix incorrect attributes type in Modal, Drawer and Spotlight
- `[@mantine/tiptap]` Fix controls throwing errors when editor is destroyed/not initialized (#8900)
- `[@mantine/core]` Menu: Add option to pass safe area polygon options down to Menu.Sub (#8908)

##### New Contributors
* @chbaefront made their first contribution in https://github.com/mantinedev/mantine/pull/8908
* @krusche made their first contribution in https://github.com/mantinedev/mantine/pull/8900
* @hyeongjun6364 made their first contribution in https://github.com/mantinedev/mantine/pull/8901
* @Israadaassi1 made their first contribution in https://github.com/mantinedev/mantine/pull/8921

**Full Changelog**: https://github.com/mantinedev/mantine/compare/9.2.1...9.2.2

### 9.2.1

- Date: 2026-05-14
- Version: 9.2.1
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.2.1
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.2.1

- **fixed** — Fix tiptap controls having stale state when built with react compiler
- **fixed** — Fix highlighted area being stuck at the previously hovered chart legend section if mouse is moved quickly
- **fixed** — Fix incorrect duplicate modals ids handling
- **fixed** — Fix Table th borders being rendered transparent if sticky prop set
- **fixed** — Fix error id not being passed to aria-describedby in Checkbox, Radio and Switch components
- **added** — Add aria-valuetext support to Slider and RangeSlider
- **changed** — Improve MonthView multi-day events overlap rendering for maxed-out days
- **fixed** — Fix mergeMantineTheme mutating DEFAULT_THEME.headings
- **fixed** — Fix use-debounced-value leading callback not being reset on timeout
- **added** — Add accent insensitive option support to Highlight
- **fixed** — Fix some form handlers not being stable reference
- **changed** — Change useFsAccessApi to false by default to make Dropzone compatible with all current browsers
- **fixed** — Fix incorrect events positioning with intervalMinutes={60}
- **fixed** — Fix PinInput keyboard shortcuts being blocked on numeric input type
- **fixed** — Fix default validators making form.validate return value async
- **added** — Add safe polygon support for Menu sub menus
- **fixed** — Fix ScrollArea Maximum update depth exceeded error
- **fixed** — Fix TreeSelect focus moving to input after clear button click

##### What's Changed
- `[@mantine/tiptap]` Fix controls having stale state when built with react compiler (#8725)
- `[@mantine/charts]` Fix highlighted are being stuck at the previously hovered chart legend section if mouse is moved quickly (#8768)
- `[@mantine/modals]` Fix incorrect duplicate modals ids handling (#8736)
- `[@mantine/core]` Table: Fix th borders being rendered transparent if `sticky` prop set (#8778)
- `[@mantine/core]` Fix error id not being passed to `aria-describedby` in Checkbox, Radio and Switch components (#8820)
- `[@mantine/core]` Add `aria-valuetext` support to Slider and RangeSlider (#8871)
- `[@mantine/schedule]` MonthView: Improve multi-day events overlap rendering for maxed-out days (#8874)
- `[@mantine/core]` Fix `mergeMantineTheme` mutated `DEFAULT_THEME.headings` (#8875)
- `[@mantine/hooks]` use-debounced-value: Fix `leading` callback not being reset on timeout (#8833)
- `[@mantine/core]` Highlight: Add accent insensitive option support (#8890)
- `[@mantine/form]` Fix some handlers not being stable reference (#8891)
- `[@mantine/dropzone]` Change `useFsAccessApi` to false by default to make Dropzone compatible with all current browsers (#8876)
- `[@mantine/schedule]` Fix incorrect events positioning with `intervalMinutes={60}` (#8887)
- `[@mantine/core]` PinInput: Fix keyboard shorcuts being blocked on numeric input type (#8889)
- `[@mantine/form]` Fix default validators making form.validate return value async (#8880)
- `[@mantine/core]` Menu: Add safe polygon support for sub menus (#8888)
- `[@mantine/core]` ScrollArea: Fix Maximum update depth exceeded error
- `[@mantine/core]` TreeSelect: Fix focus to moving to input after clear button click

##### New Contributors
* @oab24413gmai made their first contribution in https://github.com/mantinedev/mantine/pull/8892
* @sarioglu made their first contribution in https://github.com/mantinedev/mantine/pull/8890
* @noahsilas made their first contribution in https://github.com/mantinedev/mantine/pull/8833
* @chaitanya-bhagavan made their first contribution in https://github.com/mantinedev/mantine/pull/8875
* @liamdon made their first contribution in https://github.com/mantinedev/mantine/pull/8874
* @oozan made their first contribution in https://github.com/mantinedev/mantine/pull/8820
* @Pirulax made their first contribution in https://github.com/mantinedev/mantine/pull/8736

**Full Changelog**: https://github.com/mantinedev/mantine/compare/9.2.0...9.2.1

### 9.2.0 — 9.2.0 🔥

- Date: 2026-05-11
- Version: 9.2.0
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.2.0
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.2.0

- **added** — TreeSelect component for picking one or more values from hierarchical tree data with single, multiple, and checkbox selection modes
- **added** — use-drag hook for handling pointer drag gestures with movement tracking, velocity, direction and axis constraints
- **added** — InlineDateTimePicker component that renders a calendar with a time picker inline without a dropdown
- **changed** — Notifications now support dismissing by dragging left or right, and with horizontal scroll swipe while hovered
- **changed** — DateTimePicker now supports type="range" to select a date and time range with two time inputs
- **added** — Combobox examples for building tree select components with connecting lines, expand/collapse chevrons, and proper indentation

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/9-2-0)

##### Support Mantine development

You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
All funds are used to improve Mantine and create new features and components.

##### TreeSelect component

New [TreeSelect](https://mantine.dev/core/tree-select) component allows picking one or more values from hierarchical tree data.
It supports three selection modes: single, multiple, and checkbox (with parent-child cascade):

```tsx
import { TreeSelect } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <TreeSelect
      label="Your favorite item"
      placeholder="Pick value"
      data={data}
    />
  );
}
```

##### Tree select Combobox examples

New [Combobox examples](https://mantine.dev/combobox?e=TreeSelectCombobox) showing how to build tree select components
from Combobox primitives with connecting lines, expand/collapse chevrons, and proper indentation:

- [Tree select](https://mantine.dev/combobox?e=TreeSelectCombobox) – basic single-value tree select
- [Tree multi select](https://mantine.dev/combobox?e=TreeMultiSelectCombobox) – multi select with checkbox cascade
- [Searchable tree select](https://mantine.dev/combobox?e=TreeSelectSearchable) – tree select with search filtering
- [Tree select with checkboxes](https://mantine.dev/combobox?e=TreeSelectCheckbox) – single select with expand-on-click
- [Virtualized tree select](https://mantine.dev/combobox?e=TreeSelectVirtualized) – large tree (~500 nodes) with @tanstack/react-virtual

##### Notifications swipe dismissal

[@mantine/notifications](https://mantine.dev/x/notifications) now supports dismissing notifications by dragging them
left or right, and with horizontal scroll swipe while hovered. Both interactions can be disabled
on `Notifications`, and individual items can opt out with `allowClose: false`.

```tsx
import { Button } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Button
      onClick={() =>
        notifications.show({
          title: 'Default notification',
          message: 'Do not forget to star Mantine on GitHub! 🌟',
        })
      }
    >
      Show notification
    </Button>
  );
}
```

##### use-drag hook

New [use-drag](https://mantine.dev/hooks/use-drag) hook handles pointer drag gestures with movement tracking,
velocity, direction and axis constraints. It uses the Pointer Events API and works with
both mouse and touch input:

```tsx
import { useState } from 'react';
import { Button, Group, Paper, Text } from '@mantine/core';
import { useDrag } from '@mantine/hooks';

interface NotificationItem {
  id: number;
  text: string;
}

function SwipeNotification({
  notification,
  onDismiss,
}: {
  notification: NotificationItem;
  onDismiss: (id: number) => void;
}) {
  const [offset, setOffset] = useState(0);
  const [dismissed, setDismissed] = useState(false);

  const { ref, active } = useDrag(
    (state) => {
      if (state.last) {
        const shouldDismiss =
          Math.abs(state.movement[0]) > 120 || state.velocity[0] > 0.5;
        if (shouldDismiss) {
          setDismissed(true);
          setTimeout(() => onDismiss(notification.id), 300);
        } else {
          setOffset(0);
        }
      } else {
        setOffset(state.movement[0]);
      }
    },
    { axis: 'x', threshold: 5, filterTaps: true }
  );

  return (
    <Paper
      ref={ref}
      p="sm"
      mb="xs"
      withBorder
      radius="md"
      style={{
        transform: dismissed
          ? `translateX(${offset > 0 ? 400 : -400}px)`
          : `translateX(${offset}px)`,
        opacity: dismissed ? 0 : 1 - Math.min(Math.abs(offset) / 200, 1) * 0.6,
        transition: active ? 'none' : 'transform 300ms ease, op

_[Truncated at 4000 characters — full notes: https://github.com/mantinedev/mantine/releases/tag/9.2.0]_