# 🎉 Dash Mantine Components 2.0.0 – Powered by Mantine v8

**URL:** <https://community.plotly.com/t/dash-mantine-components-2-0-0-powered-by-mantine-v8/92557>\
**Category:** Dash Python\
**Created:** [June 3, 2025, 4:13pm UTC](https://community.plotly.com/t/dash-mantine-components-2-0-0-powered-by-mantine-v8/92557 "2025-06-03T16:13:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [June 3, 2025, 4:13pm UTC](https://community.plotly.com/t/dash-mantine-components-2-0-0-powered-by-mantine-v8/92557/1 "2025-06-03T16:13:05Z")

</div>

We’re excited to announce **Dash Mantine Components 2.0.0** , a major release with powerful new features, new components, and better alignment with [Mantine v8](https://mantine.dev/changelog/8-0-0/).

It’s now easier than ever to build rich, customizable Dash apps with fully integrated styling, interactive behaviors, and React-level flexibility — all from Python.

### 🔧 See the [Migration Guide](https://www.dash-mantine-components.com/migration) for help upgrading your apps.

* * *

### ▶ Want to try it live?

This post shows screenshots only — to explore live examples with code, visit the  
📖 [DMC 2.0.0 Release Announcement on the docs site](https://www.dash-mantine-components.com/release-2-0-0)

* * *

## 🚀 Highlights

- **Functions as Props** – Use JavaScript functions from Python for chart formatting, sliders, dropdowns, tooltips, and more
- **New DatePicker** – A calendar-only picker used in all date components, with deep config support
- **New TimePicker & TimeGrid** – Improved time selection with dropdowns and time slots
- **Simplified Notifications** – Drop-in `NotificationContainer` with access to Mantine’s notification API
- **Menu with Submenus** – Now supports nested dropdowns
- **Carousel API changes** – More consistent and customizable via `emblaOptions`

* * *

## 💡 Functions as Props

You can now customize components by passing JavaScript functions from Python, using:

```python
{"function": "myFunction"}

```

This lets you format labels, filter options, customize charts, and more — all safely, using only functions defined in your `/assets/*.js` folder under the `window.dashMantineFunctions` namespace.

You can also pass options from Python:

```python
{"function": "formatTemp", "options": {"unit": "F"}}

```

🤔 Don’t know JavaScript? No problem!  
The docs include examples of how to use AI to convert Python functions to JavaScript, with prompt templates to help you get reliable results every time:

📖 [Docs: Functions as Props →](https://www.dash-mantine-components.com/functions-as-props)

* * *

### Example: Custom Slider Label + Scale

📖 [Slider Docs](https://www.dash-mantine-components.com/components/slider)

![](https://github.com/snehilvj/dmc-docs/blob/168f1bbb1eacd7064e5f0a4f76fcc76b566a1ea6/release_images/dmc2-0-slider.png?raw=true)

* * *

### Example: DatePicker Disabling Non-Fridays

📖 [DatePicker Docs](https://www.dash-mantine-components.com/components/datepicker)

![](https://raw.githubusercontent.com/snehilvj/dmc-docs/7de49cf9bae83e21fa81a2ea782d4a57217c5082/release_images/DMC2-calendar.png)

* * *

### Example: MultiSelect with Custom Options

📖 [Select Docs](https://www.dash-mantine-components.com/components/select)

![](https://raw.githubusercontent.com/snehilvj/dmc-docs/7de49cf9bae83e21fa81a2ea782d4a57217c5082/release_images/DMC2-multiselect.png)

* * *

## 🆕 New Components & Features

### ✅ DatePicker (Calendar-Only)

Base component for all date inputs — supports ranges, multiple dates, week numbers, and more.  
📖 [DatePicker Docs](https://www.dash-mantine-components.com/components/datepicker)

![](https://raw.githubusercontent.com/snehilvj/dmc-docs/7de49cf9bae83e21fa81a2ea782d4a57217c5082/release_images/DMC2-datepicker.png)

* * *

### ✅ TimePicker

More flexible than `TimeInput`, with support for dropdowns, presets, and time slots.  
📖 [TimePicker](https://www.dash-mantine-components.com/components/timepicker)

![](https://raw.githubusercontent.com/snehilvj/dmc-docs/7de49cf9bae83e21fa81a2ea782d4a57217c5082/release_images/DMC2-timpicker1.png)

![](https://raw.githubusercontent.com/snehilvj/dmc-docs/7de49cf9bae83e21fa81a2ea782d4a57217c5082/release_images/DMC2-timpicker2.png)

### ✅ TimeGrid

📖 [TimeGrid](https://www.dash-mantine-components.com/components/timegrid)

![](https://raw.githubusercontent.com/snehilvj/dmc-docs/7de49cf9bae83e21fa81a2ea782d4a57217c5082/release_images/DMC2-timegrid.png)

* * *

### ✅ NotificationContainer

Now you can trigger notifications directly in clientside callbacks using Mantine’s native Notification API.  
📖 [Notification Docs](https://www.dash-mantine-components.com/components/notification)

* * *

### ✅ Menu with Submenus

📖 [Menu Docs](https://www.dash-mantine-components.com/components/menu)

![](https://raw.githubusercontent.com/snehilvj/dmc-docs/7de49cf9bae83e21fa81a2ea782d4a57217c5082/release_images/dmc2-submenu.gif)

* * *

### ✅ Updated Carousel API

Props like `loop`, `align`, and `dragFree` must now be passed via `emblaOptions`.  
See [Carousel Migration Example](https://www.dash-mantine-components.com/components/carousel).

* * *

### ⚙ Other Notable Changes

- [Switch](https://www.dash-mantine-components.com/components/switch) now has an thumb indicator by default.
- [Popover](https://www.dash-mantine-components.com/components/popover) now hides automatically when its target is hidden or removed. Configurable via `hideDetached`.
- `CodeHighlight` now supports only the top 10 languages to reduce bundle size
- `DatesProvider` no longer supports `timezone` – all date values should be strings (e.g. `"2024-08-01 14:00:00"`)
- For other changes, see the [Mantine v8 Changelog](https://mantine.dev/changelog/8-0-0/#other-changes)

* * *

### Quick Start

Just a reminder…

- If you’re using Dash ≥ 3.0.0, you no longer need to set the React version manually.
- If you’re using DMC ≥ 1.2.0, there’s no need to include additional stylesheets like `dmc.styles.ALL`.

Here’s a minimal app to get started:

```python
import dash_mantine_components as dmc
from dash import Dash

app = Dash()

app.layout = dmc.MantineProvider(
    dmc.Alert(
        "Welcome to Dash Mantine Components",
        title="Hello!",
        color="violet",
    )
)

if __name__ == " __main__":
    app.run(debug=True)

```

* * *

## 📚 Past Releases

Want to catch up? You can find previous updates on our  
🔗 [GitHub Releases Discussion Page](https://github.com/snehilvj/dash-mantine-components/discussions/categories/releases)

* * *

## 🙌 Thank You, Contributors!

Huge thanks to @BSd3v for the contributions and to @alexcjohnson for code reviews, insights, and keeping the API clean.