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

Need	Component	Key Props
Text input	TextInput	label, placeholder, value, debounce
Dropdown	Select	data, value, searchable, clearable
Multi-select	MultiSelect	data, value, searchable
Checkbox	Checkbox	label, checked
Toggle	Switch	label, checked, onLabel, offLabel
Number	NumberInput	value, min, max, step
Date	DatePickerInput	value, type, minDate, maxDate
Rich text	Textarea	label, value, autosize, minRows
File upload	FileInput	value, accept, multiple

Layout

Need	Component	Key Props
Content wrapper	Container	size, px, py
Vertical stack	Stack	gap, align, justify
Horizontal row	Group	gap, justify, wrap
CSS Grid	Grid, GridCol	columns, gutter, span
Full app shell	AppShell	header, navbar, aside, footer
Card container	Card	shadow, padding, radius, withBorder
Flex layout	Flex	direction, wrap, gap, align

Navigation

Need	Component	Key Props
Nav item	NavLink	label, href, active, leftSection
Tabs	Tabs, TabsList, TabsPanel	value, orientation
Breadcrumb	Breadcrumbs	separator
Stepper	Stepper, StepperStep	active, onStepClick
Pagination	Pagination	value, total, siblings
Table of contents	TableOfContents	links, variant, active

Feedback & Overlays

Need	Component	Key Props
Modal dialog	Modal	opened, onClose, title, centered
Side panel	Drawer	opened, onClose, position, size
Toast	Notification	title, message, color, icon
Alert banner	Alert	title, color, variant, icon
Loading	Loader, LoadingOverlay	size, type, visible
Progress	Progress, RingProgress	value, size, sections
Tooltip	Tooltip	label, position, withArrow
Copy button	CopyButton	value, timeout

Data Display

Need	Component	Key Props
Data table	Table	data, striped, highlightOnHover
Accordion	Accordion, AccordionItem	value, multiple, variant
Timeline	Timeline, TimelineItem	active, bulletSize
Badge	Badge	color, variant, size

Charts

Need	Component	Key Props
Line	LineChart	data, dataKey, series
Bar	BarChart	data, dataKey, series, orientation
Area	AreaChart	data, dataKey, series
Pie/Donut	DonutChart, PieChart	data, chartLabel
Scatter	ScatterChart	data, dataKey, series

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.