You can now sponsor Mantine development with OpenCollective . All funds are used to improve Mantine and create new features and components.
New @mantine/lightbox package – a full-screen media lightbox with carousel navigation, zoom, thumbnails, toolbar customization, and store-based API. Supports image, video, and custom slides:
Notifications now support renderNotification prop that allows you to completely replace the default notification with custom content. All animations (enter, exit, drag dismiss) are preserved for custom notifications:
Notifications now support layout="stacked" prop that displays notifications in a stacked layout where only the latest notification is fully visible, and older notifications peek out behind it:
New ActionBar component – a fixed-position bottom bar for bulk selection actions. Designed to be controlled by table or checkbox selections, it provides a set of actions that can be performed on selected items.
RichTextEditor now includes a set of controls for editing tables. Install and register the Tiptap table extension ( TableKit ), then add the controls to the toolbar. RichTextEditor.TableInsert opens a grid to pick the table size, and the other controls add/remove rows and columns, toggle header row/column and merge/split cells. All table controls are automatically disabled when the cursor is not inside a table:
RichTextEditor now supports collapsible sections. Install and register the Tiptap details extension ( Details , DetailsSummary and DetailsContent ), then add RichTextEditor.Details to the toolbar. The control wraps the current block in a collapsible details node, or removes it when the cursor is already inside one:
To support the control, Typography now styles details and summary elements – a border, padding and a custom disclosure triangle. This applies to all details elements inside Typography , not just those created by the editor. All of the new selectors have zero specificity ( :where() ), so they can be overridden without !important .
RichTextEditor can now display formatting marks. Install and register the Tiptap invisible characters extension , then add RichTextEditor.InvisibleCharacters to the toolbar. The control toggles the visibility of spaces, paragraph breaks and hard breaks, and reflects the current visibility as its active state:
New GaugeChart component – a radial gauge chart for KPI and status display. Supports threshold sections, target marker, custom labels, and configurable arc angles.
New WaffleChart component – a part-to-whole grid chart with colored cells. Simpler and more compact alternative to pie/donut charts for displaying percentages and proportions.
New MatrixChart component – a generic x/y heatmap with categorical axes. Each cell is colored based on a value, useful for visualizing patterns in two-dimensional categorical data.
New CandlestickChart component – a financial OHLC chart that displays open, high, low and close values as candles. Candles are colored based on their direction, the wick shows the high–low range and the body shows the open–close range. Supports custom colors, data keys, reference lines, axis labels, tooltip labels and value formatting.
AreaChart , BarChart , LineChart , CompositeChart and ScatterChart now support the referenceAreas prop that highlights a rectangular region of the plot – a weekend band, a target range, a threshold zone and similar annotations. Each area is bounded by x1 / x2 and/or y1 / y2 data values (omit one pair to span the full opposite axis) and supports a theme color and a label .
AreaChart , BarChart , LineChart , CompositeChart and ScatterChart now support the referenceDots prop that marks individual points on the plot – a peak, an event, a record value or an anomaly. Each dot is positioned by x / y data coordinates and supports a radius, a theme color and a label . Reference dots are rendered on top of the chart series.
Note that referenceLines in AreaChart are now rendered on top of the areas instead of behind them, which makes them consistent with BarChart , LineChart , CompositeChart and ScatterChart , where reference lines were already painted over the series.
AreaChart now supports type="stream" that renders a streamgraph (also known as ThemeRiver) – a stacked area chart whose baseline flows around a central axis instead of being fixed to zero, producing the characteristic organic "river" shape. The y-axis is hidden by default for this type since its floating baseline makes the values not meaningful to read off:
ScatterChart now supports the withRightYAxis prop that displays an additional Y axis on the right side of the chart, configurable with rightYAxisProps and rightYAxisLabel . Bind data series to the right Y axis by setting yAxisId: 'right' in the data object – series without yAxisId are bound to the left Y axis. Both axes use the same dataKey.y value, but their scales are calculated independently from the series assigned to them:
Stepper component now supports the labelPosition prop. Set labelPosition="bottom" to display the step label and description below the step icon:
Cascader with expandTrigger="hover" now keeps the open column in place while the cursor moves diagonally toward it – options that the cursor passes over on the way no longer replace it. Set safeAreaPolygon={false} to expand on every hover immediately, or pass an object to configure Floating UI safePolygon options:
YearView now supports the renderDay prop that replaces the entire content of a day cell. The function is called with the day date in YYYY-MM-DD format and the events grouped on that day – the same list that is used to render the default indicators, but without the three items limit. This makes it possible to display counts, badges or icons instead of the default dots:
ResourcesMonthView now supports the withEventResize prop. Events can be resized by dragging their start or end edges, and the onEventResize callback is called with the updated event start and end dates. Resizing snaps to whole days and preserves the event's original time of day. Use canResizeEvent to control which events can be resized:
Time-grid Schedule views ( DayView , WeekView , ResourcesDayView , ResourcesWeekView ) now support eventDragInterval and eventResizeInterval props that set the snap step used when events are moved and resized, independent of the intervalMinutes grid size. For example, a 30-minute grid can allow 15-minute drag and resize increments. A ghost preview shows where the event will land while dragging:
Dropzone now depends on react-dropzone 20 (previously 15). The upgrade brings several behavior and type changes: