You can now sponsor Mantine development with OpenCollective . All funds are used to improve Mantine and create new features and components.
New deduplicateInlineStyles prop on MantineProvider enables React 19 style tag deduplication for responsive style props . When many components share the same responsive style prop values, only a single <style /> tag is generated and hoisted to <head /> instead of each component injecting its own:
This can significantly improve performance when rendering large lists of components with identical responsive style props. See the styles performance guide for more details.
New use-mask hook attaches real-time input masking to any <input> element via a ref callback. It formats user input against a defined pattern and exposes both the masked display value and the raw unmasked value. The hook supports built-in and custom tokens, dynamic masks, character transforms, optional segments, and regex array format:
New MaskInput component is a wrapper around use-mask hook that provides all standard input props (label, description, error, etc.) and supports all mask options:
New Treemap component displays hierarchical data as a set of nested rectangles. It is based on the Treemap recharts component :
TimePicker component now supports type="duration" prop that allows entering durations that exceed 24 hours. In this mode, the hours field has no upper limit and the input width adjusts dynamically based on the entered value:
Heatmap component now supports withLegend prop that displays a color legend below the chart. Use legendLabels prop to customize labels (default: ['Less', 'More'] ):
MonthPicker and YearPicker components now support presets prop that allows adding predefined values to pick from. Presets are also available in MonthPickerInput and YearPickerInput components:
New use-roving-index hook implements the roving tabindex keyboard navigation pattern. It manages tabIndex state for a group of focusable elements, handles arrow key navigation with disabled item skipping, and supports both 1D lists and 2D grids:
Tree component now supports drag-and-drop reordering of nodes. Provide onDragDrop callback to enable it, and use the moveTreeNode utility to update data based on the result:
Tree now supports lazy loading of children. Set hasChildren: true on a node without providing children – when the node is expanded for the first time, onLoadChildren callback passed to useTree is called. Use mergeAsyncChildren utility to splice loaded children into your data:
Tree now includes filterTreeData utility to filter tree data based on a search query. Matching nodes and their ancestors are preserved in the result. You can provide a custom filter function for advanced matching (for example, fuzzy search with fuse.js):
Tree now supports withLines prop to display connecting lines showing parent-child relationships. Lines adapt to levelOffset spacing automatically:
Tree now provides flattenTreeData utility and FlatTreeNode component for virtualized rendering of large trees. The component does not depend on any virtualization library – you supply one yourself (e.g., @tanstack/react-virtual ):
useTree hook now supports checkStrictly option. When enabled, checking a parent node does not affect children and vice versa – each node's checked state is fully independent:
Slider component now supports startPointValue prop that changes the origin of the filled bar. When set, the bar extends from the given value toward the current value – to the left for values below the start point and to the right for values above it:
WeekView component now supports forceCurrentTimeIndicator prop. When set, the current time indicator is displayed on the same day of week even when viewing a different week:
New MonthView demo shows how to use renderEvent to visually differentiate all-day and timed events. All-day events render as regular colored bars, while timed events display as a colored dot with the start time and title: