apps/mantine.dev/src/pages/changelog/9-1-0.mdx
import { HeatmapDemos, MaskInputDemos, MonthPickerDemos, MonthViewDemos, SliderDemos, TimePickerDemos, TreeDemos, TreemapDemos, UseMaskDemos, UseRovingIndexDemos, WeekViewDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.Changelog910);
You can now sponsor Mantine development with OpenCollective. All funds are used to improve Mantine and create new features and components.
<SponsorButton />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:
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider deduplicateInlineStyles>
</MantineProvider>
);
}
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:
<Demo data={MaskInputDemos.usage} />New Treemap component displays hierarchical data as a set of nested rectangles. It is based on the Treemap recharts component:
<Demo data={TreemapDemos.nestedDataDemo} />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:
keepMountedMode prop that controls how inactive tab panels are hidden when keepMounted is true. Set keepMountedMode="display-none" to use display: none styles instead of the default Activity component.enabled parameter to dynamically enable/disable the listener. The hook also uses event.composedPath() in both ref and nodes branches for consistent Shadow DOM support and correctly ignores clicks on detached DOM nodes in the single-ref mode.step option to configure increment/decrement step size (default 1).maxWait option to guarantee execution within a maximum time window during continuous calls, and isPending() method to check if a debounced call is waiting.flush method to immediately apply the pending debounced value.onScrollCancel callback that fires when the scroll animation is interrupted by the user, and returns a scrolling boolean to indicate whether a scroll animation is in progress.