Dash Mantine Components v3 is now available!
Based on Mantine 9.7.4.
See the complete changelog, with live examples of new features and components:
Highlights
- New Marquee component for scrolling content.
- New Splitter component for resizable split-pane layouts.
- Over 100 new props and enhancements across the component library.
- New chart capabilities, including brush (range slider) selection, streamgraphs, and reference markers.
- Reorderable pills in MultiSelect and TagsInput, with drag-and-drop and keyboard support.
- Expanded date and time inputs, including date ranges and durations over 24 hours.
- Improved notifications, input states, and RichTextEditor table controls.
There are far too many new features to cover in one post! I’ll highlight some of the bigger changes in separate posts, with examples of what’s possible.
In the meantime, be sure to check out the v3 Release page in the docs, which shows nearly all the changes with live examples and code.
Migration Guide
DMC v3 is based on Mantine v9, so this is a major release with some breaking changes. However, if you are upgrading from DMC v2 I think you’ll find the migration easier than you might expect.
As a real-world example, I updated the DMC documentation app, which uses almost every component and prop in the library. The entire migration from v2 to v3 took me about 15 minutes --without using AI!
For most apps upgrading from v2, the changes should be fairly minor. The most common one is renaming the Grid component’s gutter prop to gap. There are a few other less commonly used props that have changed as well.
There are also some styling and behavior changes. I recommend trying the new defaults first. If you prefer the previous behavior, the migration guide explains how to restore it.
For advanced users who access Mantine components and APIs directly, or use Recharts in JavaScript, there may be additional migration work due to changes in the Mantine v9 API and the upgrade to Recharts 3.
One thing worth mentioning: all the custom JavaScript functions used in the DMC docs app, including functions for formatting numbers, text, and components, continued to work without any changes.
If you’re upgrading from DMC 0.14 to v3, the migration is also be relatively straightforward. However, if you’re coming from a version older than 0.14, expect a more involved upgrade.
See the Migration Guide for a complete list of changes.
You can also review the upstream Mantine v9 changes. They start here in Mantine v9.0.0 changelog. Be sure to check out all the changelogs for Mantine 9.0 thrugh 9.7
Requirements
DMC v3 requires Dash >= 4.5 and React 19.
Set the React version in your app:
import dash
dash._dash_renderer._set_react_version("19.2.4")
app = Dash()
Alternatively, set the environment variable:
REACT_VERSION=19.2.4 python app.py
Quick Start
Here is a quick start app featuring one of the new features in dcc.MultiSelect: the ability to re-order the selected items by dragging the pills.
from dash import Dash, html, _dash_renderer, Input, Output
import dash_mantine_components as dmc
_dash_renderer._set_react_version("19.2.4")
app = Dash()
app.layout = dmc.MultiSelect(
label="Select your favorite superpowers",
description="Drag pills to put them in order of preference.",
data=["Teleport", "Time Travel", "Fly", "Invisibility", "Mind Reading"],
value=["Teleport", "Time Travel", "Fly", "Invisibility", "Mind Reading"],
withPillsReorder=True,
)
if __name__ == "__main__":
app.run(debug=True)
