# Mantine 9.3.0 — 9.3.0 🥵

- Product: Mantine (https://whatsnew.fyi/product/mantine)
- Vendor: Mantine
- 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

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

---

- **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]_