{"id":5762,"library":"dash-mantine-components","title":"Dash Mantine Components","description":"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.","status":"active","version":"2.6.1","language":"en","source_language":"en","source_url":"https://github.com/snehilvj/dash-mantine-components","tags":["plotly-dash","ui-components","mantine","frontend","react"],"install":[{"cmd":"pip install dash-mantine-components","lang":"bash","label":"Install stable version"}],"dependencies":[{"reason":"Core dependency for building Dash applications.","package":"dash"}],"imports":[{"symbol":"dmc","correct":"import dash_mantine_components as dmc"},{"symbol":"Dash","correct":"from dash import Dash"},{"note":"All DMC apps must be wrapped in `dmc.MantineProvider` for styling and theming to work.","wrong":"app.layout = dmc.SomeComponent(...)","symbol":"MantineProvider","correct":"import dash_mantine_components as dmc\napp.layout = dmc.MantineProvider([...])"}],"quickstart":{"code":"import dash_mantine_components as dmc\nfrom dash import Dash, html\n\napp = Dash(__name__)\n\napp.layout = dmc.MantineProvider(\n    [dmc.Text(\"Hello, Dash Mantine Components!\"), dmc.Button(\"Click me!\")]\n)\n\nif __name__ == \"__main__\":\n    app.run_server(debug=True)","lang":"python","description":"A minimal Dash application demonstrating the use of Dash Mantine Components, including the essential `MantineProvider` wrapper."},"warnings":[{"fix":"Ensure your main app layout is a child of `dmc.MantineProvider` (e.g., `app.layout = dmc.MantineProvider([...])`).","message":"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.","severity":"breaking","affected_versions":"All 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`.","message":"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.","severity":"breaking","affected_versions":"0.12.0+, 0.14.0+, 2.0.0+"},{"fix":"Remove the `timezone` prop from `dmc.DatesProvider`. Ensure all date values are formatted as strings (e.g., `\"2024-08-01 14:00:00\"`).","message":"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.","severity":"deprecated","affected_versions":"2.0.0+"},{"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`.","message":"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.","severity":"gotcha","affected_versions":"All versions prior to 2.6.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":"DMC < 2.0.0 with Dash < 3.0.0"}],"env_vars":null,"last_verified":"2026-04-14T00:00:00.000Z","next_check":"2026-07-13T00:00:00.000Z"}