## Version 2.2.0
Release announcement for Dash Mantine Components v2.2.0
Category: Releases
Released August 19, 2025
Based on Mantine 8.2.5
### Source edit mode in RichTextEditor
[RichTextEditor](/components/richtexteditor) now supports source code edit mode.
```python
import dash_mantine_components as dmc
content= 'Source code control example
New line with bold text
New line with italic text
'
component =dmc.RichTextEditor(
html=content,
toolbar={
"sticky": True,
"controlsGroups": [
["SourceCode"],
[
"Blockquote",
"Bold",
"Italic",
"Underline",
"Strikethrough",
"ClearFormatting",
"Highlight",
],
],
},
)
```
### Custom controls in RichTextEditor
Use `CustomControl` in the `controlsGroups` to create create custom controls in the `toolbar`. Mantine wraps Tiptap V2.9.
To see the commands available for use in your custom controls see the [Tiptap documentation](https://v2.tiptap.dev/docs/editor/api/commands)
Thanks to @BSd3v for adding this feature in [PR #629](https://github.com/snehilvj/dash-mantine-components/pull/629)
Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.
```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify
toolbar = {
"sticky": True,
"controlsGroups": [
[
{
"CustomControl": {
"aria-label": "Insert Table",
"title": "Insert Table",
"children": [DashIconify(icon="mdi:table-plus", width=20, height=20)],
"onClick": {"function": "insertTable"},
},
},
{
"CustomControl": {
"aria-label": "Add Column Before",
"title": "Add Column Before",
"children": [DashIconify(icon="mdi:table-column-plus-before", width=20, height=20)],
"onClick": {"function": "addColumnBefore"},
},
},
{
"CustomControl": {
"aria-label": "Delete Column",
"title": "Delete Column",
"children": [DashIconify(icon="mdi:table-column-remove", width=20, height=20)],
"onClick": {"function": "deleteColumn"},
},
},
],
[
"Bold",
"Italic",
"Underline",
],
],
}
component = dmc.RichTextEditor(
html= 'Click controls to insert table, add column before, or delete column
',
toolbar = toolbar,
className="rte" # applies custom table styles to this component only
)
```
```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
dmcfuncs.insertTable = ({editor}) => {
editor?.chain().focus().insertTable({ rows: 5, cols: 3, withHeaderRow: true }).run()
}
dmcfuncs.addColumnBefore = ({editor}) => {
editor?.chain().focus().addColumnBefore().run()
}
dmcfuncs.deleteColumn= ({editor}) => {
editor?.chain().focus().deleteColumn().run()
}
```
```css
.rte :is(table, th, td) {
border: 1px solid var(--table-border-color);
}
```
### Bar value label props
[Bar Chart](/components/barchart) now supports passing props down to [recharts LabelList](https://recharts.org/en-US/api/LabelList) component with `valueLabelProps` prop.
Thanks to first time contributor @CGaul for adding this feature in [PR #620](https://github.com/snehilvj/dash-mantine-components/pull/620)!
```python
import dash_mantine_components as dmc
from .data import data
component = dmc.BarChart(
h=300,
dataKey="month",
data=data,
withBarValueLabel=True,
valueLabelProps={"position": 'inside', "fill": 'white'},
withLegend=True,
withTooltip=False,
series=[
{"name": "Smartphones", "color": "violet.6"},
{"name": "Laptops", "color": "blue.6"},
{"name": "Tablets", "color": "teal.6"},
],
valueFormatter={"function": "formatNumberIntl"},
)
```
### Styles API attributes
You now can pass attributes to inner elements of all components that support [Styles API](/styles-api) with `attributes`
prop. For example, it can be used to add data attributes for testing purposes:
```python
import dash_mantine_components as dmc
component = dmc.Button(
"Button with attributes",
attributes={
"root": { "data-test-id": "root" },
"label": { "data-test-id": "label" },
"inner": { "data-test-id": "inner" },
},
)
```
### Container grid strategy
[Container](/components/container) now supports `strategy="grid"` prop which enables more features.
Differences from the default `strategy="block"`:
- Uses `display: grid` instead of `display: block`
- Does not include default inline padding
- Does not set `max-width` on the root element (uses grid template columns instead)
Features supported by `strategy="grid"`:
- Everything that is supported by `strategy="block"`
- Children with `data-breakout` attribute take the entire width of the container's parent element
- Children with `data-container` inside `data-breakout` have the same width as the main grid column
Example of using breakout feature:
```python
import dash_mantine_components as dmc
from dash import html
component = dmc.Container(
[
dmc.Box("Main Content", bg="var(--mantine-color-indigo-light)", h=50),
html.Div(
[
"Breakout",
html.Div(
"Container inside breakout",
style={
"backgroundColor": "var(--mantine-color-indigo-filled)",
"color": "white",
"height": 50,
},
**{"data-container": ""}
),
],
style={
"backgroundColor": "var(--mantine-color-indigo-light)",
"marginTop": 16,
},
**{"data-breakout": ""}
),
],
size=500,
strategy="grid",
)
```
### Tooltip Target
New [Tooltip](/components/tooltip) `target` prop is an alternative to `children`. It accepts a string (selector), an HTML
element or a `ref` object with HTML element. Use `target` prop when you do not render tooltip target as JSX element—for
example, in a clientside callback.
Example of using target prop with a string selector:
```python
import dash_mantine_components as dmc
component = dmc.Box([
dmc.Button("Hover me to see tooltip", id="my-target"),
dmc.Tooltip(target="#my-target", label="Tooltip over button")
])
```
### autoSelectOnBlur prop
[Select](/components/select) and [Autocomplete](/components/autocomplete) components now support `autoSelectOnBlur` prop.
Use it to automatically select the highlighted option when the input loses focus. To see this feature in action: select
an option with up/down arrows, then click outside the input:
```python
import dash_mantine_components as dmc
component = dmc.Select(
label="Your favorite library:",
data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
placeholder="Pick value",
autoSelectOnBlur=True,
w=400,
)
```
### clearSearchOnFocus prop
For searchable [Select](/components/select) components, when `clearSearchOnFocus=True`, the search input will be cleared each time the
field gains focus. This is useful when you want the user to start with an empty search box each time, without having
to manually delete the existing text.
Thanks @vaughnfuelling1 for the [feature request](https://github.com/snehilvj/dash-mantine-components/issues/626)!
```python
import dash_mantine_components as dmc
component = dmc.Select(
data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
value="Pandas",
searchable=True,
clearSearchOnFocus=True,
)
```
### Accordion chevronIconSize prop
- The [Accordion](/components/accordion) default `chevronSize` prop value was changed to `auto` to allow using dynamic icon sizes.
- The `Accordion` now supports `chevronIconSize` prop to configure size of the default chevron icon.
### New in the Docs
#### New Autocomplete component section
Use [Autocomplete](/components/autocomplete) component in the following cases:
- You want to allow user to enter any value
- You want to display suggestions to the user based on the input value
- You want to preserve user input on blur if option was not selected from the dropdown
- `value` and `label` of the option are the same.
```python
import dash_mantine_components as dmc
from dash import Output, Input, html, callback
component = html.Div(
[
dmc.Autocomplete(
label="Your favorite library",
placeholder="Pick value or enter anything",
id="framework-autocomplete",
data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
mb=10,
),
dmc.Text(id="autocomplete-value"),
]
)
@callback(Output("autocomplete-value", "children"), Input("framework-autocomplete", "value"))
def select_value(value):
return f" You selected {value}"
```
#### Layout Overview
The new [Layout Overview](/layout-overview) section helps you choose the right component for your use case:
* `Grid` – Use when columns have different sizes (for example, first column is 1/3 width, second is 2/3).
* `SimpleGrid` – Use for equal-width columns.
* `Group` – Arrange items horizontally.
* `Stack` – Arrange items vertically.
* `Flex` – Create both horizontal and vertical flexbox layouts. More flexible than `Group` or `Stack`, but requires more configuration.
This section also explains the differences between `Container`, `Paper`, and `Box`, and provides an overview of
`AppShell` for adding headers, footers, navbars, and asides to your app.
#### Theming and Style section updates
The Theming and Styles are now two sections to make the information easier to find. Plus there is a new
[Mantine Overview](/mantine-overview) section to help understand the basic features of the Mantine API.
### Patch Release 2.2.1
- Updates to Mantine 8.2.7
- Fixes regression where nested `NavLink` did not open on click
- Fixes `MulitSelect` and `Select` - changes to the `data` and `value` are batched so they only trigger a single callback
### Quick Start
Just a reminder:
* With Dash ≥ 3.0.0, there’s no need to manually set the React version.
* With DMC ≥ 1.2.0, you no longer need to include optional stylesheets such as `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",
)
)
app.run(debug=True)
```