You can now sponsor Mantine development with OpenCollective . All funds are used to improve Mantine and create new features and components.
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.
Text and 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.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi voluptatibus inventore iusto cum dolore molestiae perspiciatis! Totam repudiandae impedit maxime!
New use-splitter hook provides resizable split-pane functionality with pointer drag, keyboard navigation (WAI-ARIA Window Splitter pattern), collapsible panels and min/max constraints:
New Splitter component provides declarative resizable split pane layout built on top of the use-splitter hook:
CodeHighlight component now supports withLineNumbers prop to display line numbers alongside the code:
OverflowList component now supports collapseFrom prop that controls from which direction items are collapsed when they overflow. Set collapseFrom="start" to collapse items from the beginning – this is useful for breadcrumb-like patterns where the last items should remain visible.
Textarea component now supports bottomSection prop that renders content inside the input border at the bottom. This is useful for displaying character counters or other supplementary information:
Combobox , Select , MultiSelect , Autocomplete and TagsInput now support floatingHeight="viewport" . When set, the dropdown grows to fill the available vertical space in the viewport and the flip middleware is disabled – useful when working with large option lists:
Menu submenus now use a safe polygon when moving the cursor from the parent item to the dropdown. This allows you to move the cursor diagonally across other menu items without accidentally closing the submenu.
Menu now supports Menu.Search – a search input that filters items without taking focus away from the input. Use ArrowUp / ArrowDown to move the highlight, Enter to trigger the highlighted item. Filtering logic is controlled by the user: pass value / onChange and filter Menu.Item children based on the query. The search value is cleared automatically after the menu close transition completes; set clearSearchOnClose={false} to keep the query between openings.
Menu now supports Menu.CheckboxItem , Menu.RadioItem , and Menu.RadioGroup for building option menus. Checkbox and radio items render an indicator slot at the start and do not close the menu on click by default. The new alignItemsLabels prop on Menu controls how indicator slot space is reserved so labels stay aligned when mixing plain and indicator items.
Menu now supports Menu.ContextMenu – a target replacement that opens the dropdown at the cursor position when the wrapped element is right-clicked. The browser's default context menu is suppressed, and right-clicking again repositions the dropdown to the new coordinates.
Right-click anywhere inside this area
The menu will open at the cursor position
Popover now supports Popover.ContextMenu – a target replacement that opens the dropdown at the cursor position on right-click. Unlike Menu.ContextMenu , Popover.Dropdown can contain any content.
A popover will open at the cursor position
When focus is inside Menu dropdown (and Menu.Search is not used), pressing a printable character key now moves focus to the next item whose label starts with the typed character. Pressing the same character cycles through matches, and multiple characters typed within 500ms match items by full prefix.
Highlight component now supports caseInsensitive and accentInsensitive props. Both are enabled by default – matching is case-insensitive and accent-insensitive, so cafe matches café , CAFÉ , etc. Set either prop to false to opt out:
With accent-insensitive matching (default)
We visited café and cafe .
With accent-sensitive matching (accentInsensitive={false})
PieChart and DonutChart components now support labelsType="name" to display segment names as labels instead of values or percentages:
Tooltip , Popover and other components based on Popover now support arrowPosition="merge" . When set, the arrow forms a right triangle merged with the corresponding corner of the dropdown, and the border radius of that corner is removed.
Popover and all components built on top of it ( Combobox , Select , MultiSelect , Autocomplete , TagsInput , Menu , HoverCard , Tooltip , ColorInput , date pickers and others) now treat preventPositionChangeWhenVisible as true by default.
With this behavior, the dropdown picks its side once on open – respecting the position prop when there is enough room – and then stays on that side until the dropdown is closed. Scrolling, resizing, or changes to the dropdown content (for example narrowing a searchable Select ) no longer cause the dropdown to flip between top and bottom while it is open. The next open recalculates the side from scratch.
The flip is also more predictable: when neither side fits, the dropdown falls back to the preferred position prop instead of the side with marginally more space.
To restore the previous behavior – where the dropdown could re-flip while open whenever available space changed – pass preventPositionChangeWhenVisible={false} :
DayView and WeekView components now support getCurrentTime prop – a function that returns the current time used by the current time indicator. It is called on every tick, so the indicator keeps updating automatically. Combined with the timezone-agnostic event strings, this allows displaying the indicator in any timezone without re-implementing the update loop: