Dash Mantine Components

2.6.1 · active · verified Tue Apr 14

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.

Warnings

breaking All 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([...])`).
breaking Major 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`.
deprecated The `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"`).
gotcha When 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`.
gotcha For 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`.

Install

pip install dash-mantine-components Install stable version

Imports

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

Quickstart

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)

view raw JSON →