🎉 Dash Mantine Components 2.0.0 – Powered by Mantine v8

Dash Python
1

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.

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.

:wrench: See the Migration Guide for help upgrading your apps.

:play_button: Want to try it live?

This post shows screenshots only — to explore live examples with code, visit the
:open_book: DMC 2.0.0 Release Announcement on the docs site

:rocket: 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

:light_bulb: Functions as Props

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

{"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:

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

:thinking: 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:

:open_book: Docs: Functions as Props →

Example: Custom Slider Label + Scale

:open_book: Slider Docs

Example: DatePicker Disabling Non-Fridays

:open_book: DatePicker Docs

Example: MultiSelect with Custom Options

:open_book: Select Docs

:new_button: New Components & Features

:white_check_mark: DatePicker (Calendar-Only)

Base component for all date inputs — supports ranges, multiple dates, week numbers, and more.
:open_book: DatePicker Docs

:white_check_mark: TimePicker

More flexible than TimeInput, with support for dropdowns, presets, and time slots.
:open_book: TimePicker

:white_check_mark: TimeGrid

:open_book: TimeGrid

:white_check_mark: NotificationContainer

Now you can trigger notifications directly in clientside callbacks using Mantine’s native Notification API.
:open_book: Notification Docs

:white_check_mark: Menu with Submenus

:open_book: Menu Docs

:white_check_mark: Updated Carousel API

Props like loop, align, and dragFree must now be passed via emblaOptions.
See Carousel Migration Example.

:gear: Other Notable Changes

  • Switch now has an thumb indicator by default.
  • 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

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:

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)

:books: Past Releases

Want to catch up? You can find previous updates on our
:link: GitHub Releases Discussion Page

:raising_hands: Thank You, Contributors!

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

10 Likes