What’s New
- New
CopyButtonandCustomCopyButtoncomponents — themed, flexible, and customizable copy-to-clipboard tools. Chartcomponents now support functions for props likexAxisPropsandyAxisProps, making it easier to add dynamic, customized features to figures.RichTextEditoradds code highlighting, new props (editable,focus), and full clientsideeditorAPI access.- AI-friendly docs — generate a custom llms.txt for your project and use “Copy for LLMs” on each docs page for faster, smarter AI-assisted development.
Want to Try It Live?
This post shows screenshots only — for live interactive examples with code, check out the
DMC 2.4.0 Release Announcement on the docs site.
New: Copy to Clipboard Components
The new CopyButton and CustomCopyButton components are similar to dcc.Clipboard , but with full Mantine styling and customization.
- Customizable icons, colors, and labels for the copied state
- Support for copying from another component using
target_id - Trigger copying in callbacks with
triggerCopy=True - Build fully custom copy-to-clipboard buttons with
CustomCopyButton
Check out the new Copy Button docs.
Example 1: Styling the CopyButton
Here's the code
import dash_mantine_components as dmc
from dash_iconify import DashIconify
component = dmc.Group([
dmc.CopyButton(
value="https://www.dash-mantine-components.com/",
children="Copy URL",
copiedChildren="Copied!",
color="blue",
copiedColor="teal"
),
dmc.CopyButton(
value="This text is copied",
children=DashIconify(icon="tabler:clipboard"),
copiedChildren=DashIconify(icon="tabler:check"),
color="blue",
copiedColor="teal",
variant="outline"
),
dmc.CopyButton(
value="This text is copied",
children=DashIconify(icon="fa-regular:copy"),
copiedChildren=DashIconify(icon="fa-regular:check-circle"),
color="gray",
copiedColor="dark",
variant="transparent"
)
])
Example 2: Copy from another component:
Need a quick way to say “No”? Fetch a random excuse from No-as-a-Service and copy it with a single click.
.
Here's the code
dmc.Box([
dmc.Button("Get rejection reason", id="new-reason-btn", mb="lg"),
dmc.Group([
dmc.Text(id="reason-text", mt=10),
dmc.CopyButton(
target_id="reason-text",
children=DashIconify(icon="fa-regular:copy"),
copiedChildren=DashIconify(icon="fa-regular:check-circle"),
color="blue",
copiedColor="teal",
variant="outline",
size="xs"
)
], align="flex-start", wrap="nowrap",)
])
More chart props now support functions
The AreaChart , BarChart , BubbleChart , CompositeChart , LineChart , and ScatterChart now accept functions for these props:
xAxisProps,yAxisProps,gridProps,rightYAxisProps(all charts)zAxisProps(BubbleChartonly)
See the Functions As Props guide for details.
Example: format x-axis tick labels
This example uses a JavaScript function to format x-axis tick labels for datetime values.
here's the code
import dash_mantine_components as dmc
from dash import Dash
from datetime import datetime
data = [
{"date": datetime(2025, 3, 22), "Apples": 2890, "Oranges": 2338, "Tomatoes": 2452},
{"date": datetime(2025, 3, 23), "Apples": 2756, "Oranges": 2103, "Tomatoes": 2402},
{"date": datetime(2025, 3, 24), "Apples": 3322, "Oranges": 986, "Tomatoes": 1821},
{"date": datetime(2025, 3, 25), "Apples": 3470, "Oranges": 2108, "Tomatoes": 2809},
{"date": datetime(2025, 3, 26), "Apples": 3129, "Oranges": 1726, "Tomatoes": 2290}
]
component = dmc.AreaChart(
h=300,
dataKey="date",
data=data,
series = [
{"name": "Apples", "color": "indigo.6"},
{"name": "Oranges", "color": "blue.6"},
{"name": "Tomatoes", "color": "teal.6"}
],
curveType="Monotone",
tickLine="xy",
withGradient=False,
withDots=False,
xAxisProps={"tickFormatter": {"function": "formatDatetime"}},
valueFormatter={"function": "formatNumberIntl"},
)
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
dmcfuncs.formatDatetime = function (datetimeStr) {
const date = new Date(datetimeStr);
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
};
New RichTextEditor features
- Code highlighting is now available
- New Props:
editable,focusThanks for the PR @chgiesse - Access Editor API in a clientside callback
See examples of all the new features in the RichTextEditor docs
Example: Editable prop
Note the toolbar is hidden when the editor is read-only
here's the code
import dash_mantine_components as dmc
from dash import Input, Output, callback
component = dmc.Box([
dmc.Switch(
id="rte-toggle-editable",
label="Editable",
checked=True,
),
dmc.RichTextEditor(
id="rte-editable",
html="<p>This editor can be toggled between editable and read-only mode.</p>",
editable=True,
toolbar={
"controlsGroups": [
[
"Bold",
"Italic",
"Underline",
"Strikethrough",
"CodeBlock"
],
],
},
),
])
@callback(
Output("rte-editable", "editable"),
Input("rte-toggle-editable", "checked"),
)
def toggle_editable(checked):
return checked
Example: Focus prop:
Use the focus prop to control the editor’s focus state.
focus=True- Focus the editor at the current cursor positionfocus=False- Blur (remove focus from) the editorfocus="start"- Focus at the start of the documentfocus="end"- Focus at the end of the documentfocus=10- Focus at a specific position (character offset) Positive values start at the beginning of the document - negative values at the end.focus="all"- Focus and select all content
Example: Code Highlighting in RichTextEditor
Example: Accessing Editor clientside
Get full access to the editor API in clientside callbacks, including executing commands, inspecting content, and updating the editor state.
Here's the code
import dash_mantine_components as dmc
from dash import Dash, Input, Output, clientside_callback
component = dmc.Box([
dmc.RichTextEditor(
id="get-editor-id",
toolbar={
"controlsGroups": [
[
"Bold",
"Italic",
"Underline",
"Strikethrough",
],
],
},
html="<p>Try typing some text in this editor. Click the button below to see your character and word count.</p>"
),
dmc.Button("Get Stats", id="btn-rte-stats", n_clicks=0),
dmc.Box(id="stats"),
])
clientside_callback(
"""
function(n_clicks) {
if (n_clicks > 0) {
const editor = dash_mantine_components.getEditor('get-editor-id');
if (editor) {
const text = editor.getText();
const chars = text.length;
const words = text.split(/\\s+/).filter(Boolean).length;
return `Characters: ${chars} | Words: ${words}`;
}
}
return dash_clientside.no_update;
}
""",
Output("stats", "children"),
Input("btn-rte-stats", "n_clicks"),
)
AI-friendly documentation
LLM-friendly documentation is now available for Dash Mantine Components. It follows the llms.txt standard, enabling AI tools like ChatGPT, Cursor, Windsurf, and Claude to better understand DMC components and props.
New in this release:
- Generate a custom
llms.txtfile that includes only the components you use — improving AI accuracy and response speed. - Each docs page now includes a “Copy for LLMs” button for copying AI-friendly content directly into a chat.
See the LLMs section for full details and customization options.
Other notable updates
- Mantine patch updates from 8.3.1 through 8.3.6. See the Mantine Releases for details.
- Improved rendering in several components, including the
Stepper. Thanks to @chgiesse for PR #664.
Thank You
Special thanks to:
- @chgiesse for contributing two PRs in this release
- @BSd3v for providing help and guidance along the way
- @alexcjohnson for thoughtful feedback during code reviews
Tip: AI assistants like ChatGPT or Claude aren’t trained on these new features yet.
