Registry / web-framework / dash-mantine-components

dash-mantine-components

JSON →
library2.8.0pypypi✓ verified 23d ago

Dash Mantine Components (DMC) is an extensive Python library offering over 100 customizable components for Plotly Dash applications, based on the Mantine React library. It provides consistent styling, theming, and full support for light and dark modes, facilitating the creation of feature-rich and accessible dashboards. The library maintains an active development pace with frequent minor releases for bug fixes and new features, and major versions often aligning with upstream Mantine releases.

pip install dash-mantine-components
INSTALL
IMPORT
SIG · DASH-MANTINE-COMPO
D
dash-mantine-components
web-frameworkpythonv2.8.0
Install
8.3s avg
Import
2279ms
Disk
155MB
Pass rate
10/ 10
Env Coverage10 / 10
glibc
3.93.13
musl
3.93.13
Install & Compatibility
Where this runs
tested against v2.8.0 · pip install
no network on importno background threads
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
py 3.103.95 runs
installs and imports cleanly · install 0.0s · import 2.384s · 150.6MB
glibc
py 3.103.95 runs
installs and imports cleanly · install 8.3s · import 2.174s · 150MB
155MB installed
● package 155MB
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

dmc
import dash_mantine_components as dmc
Dash
from dash import Dash
MantineProvider
import dash_mantine_components as dmc app.layout = dmc.MantineProvider([...])
app.layout = dmc.SomeComponent(...)
All DMC apps must be wrapped in `dmc.MantineProvider` for styling and theming to work.

A minimal Dash application demonstrating the use of Dash Mantine Components, including the essential `MantineProvider` wrapper.

import dash_mantine_components as dmc from dash import Dash, html app = Dash(__name__) app.layout = dmc.MantineProvider( [dmc.Text("Hello, Dash Mantine Components!"), dmc.Button("Click me!")] ) if __name__ == "__main__": app.run_server(debug=True)
Debug
Known issues
breakingAll Dash Mantine Components applications MUST be wrapped in `dmc.MantineProvider`. This component is crucial for enabling global styles, themes, and dark/light mode functionality across all child components.
fix
Ensure your main app layout is a child of `dmc.MantineProvider` (e.g., `app.layout = dmc.MantineProvider([...])`).
affects: All versions
breakingMajor version updates of `dash-mantine-components` (e.g., 0.x to 2.x) often align with major Mantine React library releases. These can introduce significant breaking changes, API alterations, or prop removals. Always consult the official migration guides for specific versions.
fix
Review the relevant migration guide (e.g., `DMC v2 Migration Guide`) when upgrading across major versions and test your application thoroughly. Examples include `Carousel` prop removals (`draggable`, `speed`) in v2.0.0 due to Embla Carousel V8 upgrade, and `DateTimePicker`'s `timeInputProps` being replaced by `timePickerProps`.
affects: 0.12.0+, 0.14.0+, 2.0.0+
deprecatedThe `DatesProvider` component no longer supports the `timezone` option. All date values should be passed as strings. Using `timezone` will result in an error or unexpected behavior.
fix
Remove the `timezone` prop from `dmc.DatesProvider`. Ensure all date values are formatted as strings (e.g., `"2024-08-01 14:00:00"`).
affects: 2.0.0+
gotchaWhen using light/dark mode, a 'flash' of the incorrect theme might occur on initial page load or refresh. This happens before Dash mounts and applies the theme.
fix
For `dmc >= 2.6.0`, use `dmc.pre_render_color_scheme()` in conjunction with `dmc.ColorSchemeToggle` to apply the correct theme before the app renders. This relies on the color scheme being persisted in `localStorage` by `ColorSchemeToggle`.
affects: All versions prior to 2.6.0
gotchaFor Dash versions prior to 3.0, it was necessary to explicitly set the React version to 18.2.0 for `dash-mantine-components` to function correctly.
fix
If using `Dash < 3.0`, add `import dash; dash._dash_renderer._set_react_version("18.2.0")` at the start of your app. This is no longer required for `Dash >= 3.0`.
affects: DMC < 2.0.0 with Dash < 3.0.0
Errors
Common errors & fixes
TypeError: r.useId is not a function
This error typically occurs due to a conflict between the React version used by `dash-mantine-components` (which is based on Mantine v7 and React 18) and the React version used by Dash (often defaulting to an older React 16 in Dash 2.x).
fix
Ensure Dash uses React 18 by adding `dash._dash_renderer._set_react_version("18.2.0")` at the start of your app, usually after importing `dash`.
AttributeError: module 'dash_mantine_components' has no attribute 'DatePickerInput'
This error usually indicates that a component name has changed or was introduced in a newer version of `dash-mantine-components`, and the installed version is outdated or does not contain that specific component.
fix
Upgrade `dash-mantine-components` to the latest version using `pip install --upgrade dash-mantine-components`. If the component was renamed, refer to the official documentation for the correct new name (e.g., `DateRangePicker` might have been replaced by `DatePicker` with a `type="range"` prop in older versions, or a new component introduced).
@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
Since `dash-mantine-components` versions 0.14.0 and higher (aligning with Mantine v7), wrapping your Dash app's layout with `dmc.MantineProvider` is mandatory for consistent styling, theming, and functionality.
fix
Wrap your entire app's layout within `dmc.MantineProvider` like so: `app.layout = dmc.MantineProvider(children=[...your app layout...])`.
TypeError: The dash_mantine_components.NavLink component (version 0.14.0) received an unexpected keyword argument: icon
This specific error occurs because of a breaking change in `dash-mantine-components` v0.14.0 (aligning with Mantine v7), where the `icon` prop in components like `NavLink` was renamed to `leftSection`.
fix
Replace the `icon` prop with `leftSection` in the affected component. For example, change `dmc.NavLink(icon=DashIconify(icon='home'), ...)` to `dmc.NavLink(leftSection=DashIconify(icon='home'), ...)`.
TypeError: $e.map is not a function
This JavaScript error, often seen in the browser console when using components like `dmc.MultiSelect`, indicates that a prop expecting a list (like `value` for `MultiSelect`) received a single string or non-iterable instead.
fix
Ensure that props expecting an iterable (e.g., a list of selected values for `MultiSelect`) are always provided as a Python list, even if there's only one item. For example, change `value='Red'` to `value=['Red']`.
Upgrade
Version history
2.8.0latest on PyPI · released Jun 9, 2026
Audit
Dependencies
dashrequiredCore dependency for building Dash applications.
Agent activity
12 hits · last 30 days
node
10
Resources
dash-mantine-components — pip install dash-mantine-components · libregistry