Dash Mantine Components (DMC) v2.x

Build modern Dash applications with 100+ Mantine UI components.

Quick Start

Minimal DMC app requiring MantineProvider wrapper:

from dash import Dash, callback, Input, Output
import dash_mantine_components as dmc

app = Dash(__name__)

app.layout = dmc.MantineProvider([
    dmc.Container([
        dmc.Title("My DMC App", order=1),
        dmc.TextInput(label="Name", id="name-input", placeholder="Enter name"),
        dmc.Button("Submit", id="submit-btn", mt="md"),
        dmc.Text(id="output", mt="md"),
    ], size="sm", py="xl")
])

@callback(Output("output", "children"), Input("submit-btn", "n_clicks"), Input("name-input", "value"))
def update_output(n_clicks, name):
    if not n_clicks:
        return ""
    return f"Hello, {name or 'World'}!"

if __name__ == "__main__":
    app.run(debug=True)

Critical: All DMC components MUST be inside dmc.MantineProvider.

Version Note: This skill targets DMC 2.x (Mantine 8.x). Run pip show dash-mantine-components to check your installed version. For the latest features and API changes, use fetch_docs.py to query the official documentation at <https://www.dash-mantine-components.com/assets/llms.txt>

Workflow Decision Tree

Select components by use case:

Form Inputs

Layout

Navigation

Feedback & Overlays

Data Display

Charts

What's New in Recent Versions

v2.5.x:

• TableOfContents - Auto-generated table of contents from headings
• selectFirstOptionOnDropdownOpen prop for Select/MultiSelect/Autocomplete
• openOnFocus prop for Combobox components
• AppShell mode="static" for nested shells
• window.MantineCore / window.MantineHooks for custom component building

v2.4.x:

• CopyButton / CustomCopyButton - Clipboard operations
• getEditor(id) - Access RichTextEditor TipTap instance in clientside callbacks
• Function props for chart axis/grid customization

v2.3.x:

• MiniCalendar - Compact calendar component
• ScrollAreaAutoheight - Auto-sizing scroll area
• DirectionProvider - RTL text direction support

→ Full component reference: references/components-quick-ref.md

Detailed References

Load these on demand:

• references/components-quick-ref.md for component selector and API reminders.
• references/theming-patterns.md for MantineProvider themes, color schemes, and theme toggles.
• references/styling-guide.md for style props, responsive values, and Styles API usage.
• references/callbacks-advanced.md for pattern-matching, clientside, background, and DMC-specific callback props.
• references/multi-page-apps.md for Dash Pages and AppShell layouts.
• references/charts-data-formats.md for chart data and series shapes.
• references/date-pickers-guide.md for date picker APIs and localization.
• references/dash-fundamentals.md for Dash core state, caching, and performance patterns.
• references/migration-v2.md when upgrading older DMC code.

Operating Rules

• Wrap all DMC components in dmc.MantineProvider.
• Check the installed DMC version with pip show dash-mantine-components before using version-sensitive APIs.
• Prefer official docs via scripts/fetch_docs.py when API details matter.
• Use DMC v2/Mantine 8 patterns; do not preserve old v0/v1 compatibility unless the repo requires it.
• For reviews and refactors, use $dmc-best-practices before broad redesign.