📣 Dash Mantine Components 2.3.0 Release

Dash Python
1

:sparkles: What’s New

Dash Mantine Components 2.3.0 is here! Built on top of Mantine 8.3.0, this release brings:

  • DirectionProvider for RTL layouts

  • MiniCalendar for compact date displays

  • Vertical orientation in Progress

  • RichTextEditor now powered by Tiptap V3 - enabling features like BackgroundColor, FontFamily, FontSize, LineHeight.

  • New ScrollArea features, including scrollTo and ScrollAreaAutosize

  • New Overlay component

  • Autocomplete now supports debounce prop

  • MultiSelect now enables multiple selections from the same search query

:play_button: Want to Try It Live?

This post shows screenshots only — for live interactive examples with code, check out the
:open_book: DMC 2.3.0 Release Announcement on the docs site.

New DirectionProvider component

Mantine supports right-to-left (RTL) layouts out of the box. Try the new direction toggle in the header of the DMC docs — one click and the entire app flips to RTL. Not just the text, but every component adapts. Check out the sliders in RTL mode, they feel completely natural.

See the RTL (right-to-left) direction guide for details on enabling RTL direction and adding a toggle to your app.

app.layout = dmc.DirectionProvider(
    dmc.MantineProvider([
     # your app layout
     ]),
    direction="rtl"
)

dmc-rtl

New MiniCalendar component

The new MiniCalendar component makes it easy to add compact calendars.

DMC has an extensive collection of feature rich date and time pickers that are configurable, accessible and look great in light and dark mode. See the new Date Pickers Overview in the docs.

image
image1278×366 12.2 KB

Progress vertical orientation

Progress now supports vertical orientation:

image
image504×510 8.68 KB

RichTextEditor upgraded to Tiptap V3

RichTextEditor is now built on Tiptap V3 enabling features like BackgroundColor, FontFamily, FontSize, LineHeight.

Here is an example of creating custom buttons to change the font size:

dmc-fontsize

ScrollArea scrollTo prop

The ScrollArea, now includes a scrollTo prop to control the viewport position.

image
image1388×782 52 KB

New ScrollAreaAutosize component

ScrollAreaAutosize component creates a scrollable container once a given max-height is reached.

New Overlay component

Overlay creates a customizable layer over content or the entire viewport. It’s useful for dimming effects, interactive overlays, and custom loading states. You can configure opacity, color, and positioning.
dmc-toggle-overlay1

MultiSelect improvement

MultiSelect now supports clearSearchOnChange=False allowing multiple selections from the same search query.

import dash_mantine_components as dmc

dmc.MultiSelect(
    data=["aa", "ab", "ac", "ba", "bb", "bc"],
    value=["aa"],
    searchable=True,
    clearSearchOnChange=False
)

dmc-multiselect

Autocomplete debounce prop

The Autocomplete component now supports the debounce prop. This delays the update of the value until the user stops interacting, reducing callback frequency.

3 Likes
2

Looks great! The left to right swap direction is quite impressible!

I first started using DMC for an app because of the great date pickers, now there are now so many different date picker formats it’s almost overwhelming!

I see that vertical progress bar there, sure would be cool if there was a vertical slider too :eyes: Maybe one that could be inverted (0-10 or 10-0)…

Thanks for all the fun new components!