We’re thrilled to announce Dash Mantine Components 0.15.2! This release is packed with new components, documentation updates, and fantastic contributions from the community.
Let’s dive into the highlights!
Key Updates in Mantine 7.16.1
This release now uses Mantine 7.16.1, unlocking the latest features from Mantine!
New Components
Tree Component
Display hierarchical data with the new Tree component. A huge shoutout to @Godisemo for contributing this component!
Explore the Tree Component Documentation
Highlights:
- Customizable Expand/Collapse Icons
- Selectable Items with Checkboxes
InlineCodeHighlight Component
Highlight inline code snippets with the new InlineCodeHighlight
component. Thanks again to @Godisemo for this contribution!
Check out the InlineCodeHighlight Documentation
Additional Component Props
We’ve added new props across several components to enhance their functionality and flexibility. Here are the highlights:
New Props at a Glance
disabled
prop for individual options onSegmentedControl
thanks to first time contributor @petefinetype
andbreakpoints
props forGrid
andtype
prop toSimpleGrid
thanks to @namakshenasinline
prop forCenter
allowedInitialsColors
forAvatar
defaultExpanded
forCodeHighlightTabs
autoComplete
forPasswordInput
withOverlay
andoverlayProps
forPopover
withPages
forPagination
type
forCarousel
restrictToMarks
forRangeSlider
Prop Examples
Disable prop on SegmentControl
Thanks @petefine for adding this feature and for updating the docs!
SegmentedControl Documentation
Container Queries
Set type="container"
in the SimpleGrid
, Grid
, and Carousel
components to adjust responsive values based on container width rather than viewport width.
Thank you @namakshenas for making this possible!
Align Icons with Text
Use dmc.Center(inline=True)
to align icons and text seamlessly.
Center Component Documentation
Restrict Initial Colors for Avatar
The allowedInitialsColors
prop lets you limit the colors for initials in Avatar
components.
Example: Restrict to blue and red.
Popover with Overlay
Add an overlay behind the dropdown using the withOverlay
prop. Customize it further with overlayProps
.
Pagination Controls
Hide page controls using withPages=False
for a cleaner UI.
Here is the standard Pagination withPages=True
RangeSlider: Restrict to Marks
Enable restrictToMarks=True
to limit user selections to specific marks.
CodeHighlight with Tabs and Default Expanded
The defaultExpanded
prop can be used to set the initial expanded or collapsed state to CodeHighlightTabs
component.
See this example in the CodeHighlight documentation.
Fixes and Improvements
Mantine Themed Plotly Templates
See more information on Plotly figure templates with a Mantine theme in new theme section of the docs.
This release updates the range slider button styling in the mantine_dark
template for improved readability.
See this example on PyCafe
template=“mantine_dark”
template=“mantine_light”
Documentation Enhancements
We’ve revamped the Themes section in the documentation:
See this Dash Forum Post for an introduction on how to set themes globally using the theme
prop in the MantineProvider
.
Explore the new DMC Theme Builder app for an interactive demo:
New Tips & Tricks
Discover new Tips & Tricks in the GitHub Discussions section, including FAQs and minimal examples.
New on DMC PyCafe account
Browse lots of complete, minimal examples you can run and edit in your browser. PyCafe - 21 projects by dash.mantine.components
Thank You, Contributors!
New Contributors:
- @petefine made their first contribution in disabled SegmentedControl options by petefine · Pull Request #451 · snehilvj/dash-mantine-components · GitHub
- @Godisemo made their first contribution in Add InlineCodeHighlight component by Godisemo · Pull Request #483 · snehilvj/dash-mantine-components · GitHub
Returning Contributors
- @BSd3v Thanks for setting up the PyCafe Test Environment making it easier for contributors and reviewers to try out new features live on PyCafe in Updating Test Flow by BSd3v · Pull Request #350 · snehilvj/dash-mantine-components · GitHub
- @namakshenas Thanks for enabling the container query feature on
Grid
andSimpleGrid
Thanks you also to @alexcjohnson for reviewing all the pull requests and providing invaluable feedback