Welcome to Mantine rich text editor
RichTextEditor component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. RichTextEditor is based on Tiptap.dev and supports all of its features:
- General text formatting: bold, italic, underline,
strike-through - Headings (h1-h6)
- Sub and super scripts (<sup /> and <sub /> tags)
- Ordered and bullet lists
- Text align
- And all other extensions
| Name | Description | ||
|---|---|---|---|
| Cyndi Lauper | Singer | Songwriter | Actress |
| Bruce Springsteen | Singer | Songwriter | Actor |
This is a basic example of implementing images. Drag to re-order.
Regular paragraph
{code_example}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", ], ], }, ) ``` ### Focus *New in V2.4.0* Use the `focus` prop to control the editor's focus state. - `focus=True` - Focus the editor at the current cursor position - `focus=False` - Blur (remove focus from) the editor - `focus="start"` - Focus at the start of the document - `focus="end"` - Focus at the end of the document - `focus=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:** ```python import dash_mantine_components as dmc from dash import Input, Output, callback, ctx, no_update component = dmc.Box([ dmc.Group([ dmc.Button("Focus Start", id="rte-btn-focus-start"), dmc.Button("Focus End", id="rte-btn-focus-end"), dmc.Button("Blur", id="rte-btn-blur"), ]), dmc.RichTextEditor( id="rte-focus", html="Click the buttons to control focus.
", ), ]) @callback( Output("rte-focus", "focus"), Input("rte-btn-focus-start", "n_clicks"), Input("rte-btn-focus-end", "n_clicks"), Input("rte-btn-blur", "n_clicks"), prevent_initial_call=True ) def control_focus(start, end, blur): if not ctx.triggered: return no_update button_id = ctx.triggered_id if button_id == "rte-btn-focus-start": return "start" elif button_id == "rte-btn-focus-end": return "end" elif button_id == "rte-btn-blur": return False ``` ### Editable *New in V2.4.0* The `editable` prop controls whether the editor content can be modified. When `editable=False`: - The editor becomes read-only - Users can still select and copy text - The toolbar is automatically hidden ```python 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="This editor can be toggled between editable and read-only mode.
", 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 ``` ### Sticky toolbar Set `sticky` prop on `RichTextEditor` `toolbar` prop to make toolbar sticky, control top property with `stickyOffset`. For example, in the dmc docs website there is a header with 60px height, in this case we will need to set `stickyOffset=60` to make sticky position correctly with fixed positioned header element. Note the sticky toolbar as you scroll past the example below. ### Subtle Variant `variant="subtle"` removes borders from the controls groups, makes controls larger and reduces spacing of the toolbar: ```python import dash_mantine_components as dmc component = dmc.RichTextEditor( html="Subtle rich text editor variant", extensions=[ "StarterKit", "Highlight", ], toolbar={ "sticky": True, "stickyOffset": 60, "variant": "subtle", "controlsGroups": [ [ "Bold", "Italic", "Underline", "Strikethrough", "ClearFormatting", "Highlight", "Code", ], ], }, ) ``` ### Labels and localization `RichTextEditor` supports changing labels for all controls with labels prop: ```python import dash_mantine_components as dmc colorpicker_colors = [ "#25262b", "#868e96", "#fa5252", "#e64980", "#be4bdb", "#7950f2", "#4c6ef5", ] component = dmc.RichTextEditor( html="Custom button labels", toolbar={ "sticky": True, "stickyOffset": 60, "controlsGroups": [ [ "Bold", "Italic", "Underline", "Strikethrough", "ClearFormatting", "Highlight", "Code", ], [{"ColorPicker": {"colors": colorpicker_colors}}], [ {"Color": {"color": "red"}}, {"Color": {"color": "green"}}, {"Color": {"color": "blue"}}, ], ["UnsetColor"], ], }, labels={ "boldControlLabel": "Make text bold", "italicControlLabel": "Make text bold", "colorPickerControlLabel": "Text color", # label for control in toolbar "colorPickerColorLabel": "Color number: {color}", # include color in label in the color swatch. Use f-string format "colorControlLabel": "Set Text color {color}" # include color in label with f-string format # ...other labels }, ) ``` Most labels are used to add `aria-label` and `title` attributes to the toolbar controls. Some labels support f-string formatting for dynamic values. If you do not provide all labels, then they will be merged with the default labels. Here are all available labels with their defaults: ```python default_labels = { # Controls labels "linkControlLabel": "Link", "colorPickerControlLabel": "Text color", "highlightControlLabel": "Highlight text", "colorControlLabel": "Set text color {color}", # Use f-string format to include color in label "boldControlLabel": "Bold", "italicControlLabel": "Italic", "underlineControlLabel": "Underline", "strikeControlLabel": "Strikethrough", "clearFormattingControlLabel": "Clear formatting", "unlinkControlLabel": "Remove link", "bulletListControlLabel": "Bullet list", "orderedListControlLabel": "Ordered list", "h1ControlLabel": "Heading 1", "h2ControlLabel": "Heading 2", "h3ControlLabel": "Heading 3", "h4ControlLabel": "Heading 4", "h5ControlLabel": "Heading 5", "h6ControlLabel": "Heading 6", "blockquoteControlLabel": "Blockquote", "alignLeftControlLabel": "Align text: left", "alignCenterControlLabel": "Align text: center", "alignRightControlLabel": "Align text: right", "alignJustifyControlLabel": "Align text: justify", "codeControlLabel": "Code", "codeBlockControlLabel": "Code block", "subscriptControlLabel": "Subscript", "superscriptControlLabel": "Superscript", "unsetColorControlLabel": "Unset color", "hrControlLabel": "Horizontal line", "undoControlLabel": "Undo", "redoControlLabel": "Redo", # Task list "tasksControlLabel": "Task list", "tasksSinkLabel": "Decrease task level", "tasksLiftLabel": "Increase task level", # Link editor "linkEditorInputLabel": "Enter URL", "linkEditorInputPlaceholder": "https://example.com/", "linkEditorExternalLink": "Open link in a new tab", "linkEditorInternalLink": "Open link in the same tab", "linkEditorSave": "Save", # Color picker control "colorPickerCancel": "Cancel", "colorPickerClear": "Clear color", "colorPickerColorPicker": "Color picker", "colorPickerPalette": "Color palette", "colorPickerSave": "Save", "colorPickerColorLabel": "Set Text color {color}", # Use f-string format to include color in color swatch label } ``` ### JSON or HTML Content The editor supports content in either [JSON (ProseMirror) or HTML format](https://tiptap.dev/docs/editor/core-concepts/schema). You can specify the format using the `json` or `html` prop. If both props are set, `json` takes precedence. Note: While users can type Markdown-style text into `RichTextEditor`, the component does not parse or render supplied text in Markdown content. To render Markdown text, use the `dcc.Markdown` component instead. #### When to Use Each Format: - **JSON (ProseMirror)**: Ideal for structured data storage (databases, APIs) or programmatic content manipulation (e.g., dynamically adding elements). - **HTML**: Useful for direct rendering in a browser, email clients, or using with components like `dcc.Markdown`. Note that the schema is very strict. For example, if you use `This is important`, but don’t have any [extension](/components/richtexteditor#tiptap-extensions) that handles strong tags, you’ll only see `This is important` – without the bold formatting.. For details on the schema and ProseMirror format, see the [Tiptap documentation](https://tiptap.dev/docs/editor/core-concepts/schema). Try editing the content in this example to see the JSON and HTML format: ```python from dash import Input, Output, html, callback import dash_mantine_components as dmc content = """Welcome to Mantine rich text editor
""" component = html.Div( [ dmc.RichTextEditor( html=content, extensions=[ "StarterKit", ], toolbar={ "controlsGroups": [ [ "Bold", "Italic", "Underline", "Strikethrough", ], ], }, id="rte-content", ), dmc.Text("html content:", mt="lg"), dmc.Paper(id="rte-content-html", withBorder=True, mb="lg", p="md"), dmc.Text("json content:"), dmc.Paper(id="rte-content-json", withBorder=True, p="md"), ] ) @callback(Output("rte-content-html", "children"), Input("rte-content", "html")) def update_content(content: str): return f"{content}" @callback(Output("rte-content-json", "children"), Input("rte-content", "json")) def update_content(content: str): return f"{content}" ``` ### Custom controls Use `CustomControl` in the `controlsGroups` to create create custom controls in the `toolbar`. Note that you will need to set `aria-label` attribute to make control visible for screen readers. Tiptap version note: - DMC 2.3.0 and later uses [Tiptap v3.3 commands](https://tiptap.dev/docs/editor/api/commands). - Older versions of DMC used [Tiptap v2.9 commands](https://v2.tiptap.dev/docs/editor/api/commands). Use the appropriate Tiptap documentation above to see the full list of editor commands available for your custom controls. Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document. #### Example: Insert content ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.RichTextEditor( html= 'Click control to insert star emoji
',
toolbar = {
"controlsGroups": [
[
{
"CustomControl": {
"aria-label": "Custom Button",
"title": "Custom Button",
"children": DashIconify(icon="mdi:star", width=20, height=20),
"onClick": {"function": "insertContent", "options": "⭐"},
},
},
],
],
},
)
```
```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
dmcfuncs.insertContent = ({editor}, options) => {
editor?.commands.insertContent(options)
}
```
#### Example: Table controls
```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);
}
```
#### Example: Font size controls
*New in V2.3.0*
```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify
component = dmc.RichTextEditor(
html="Change font size with the controls!
", toolbar={ "controlsGroups": [ ["H1", "H2", "H3", "H4"], [ { "CustomControl": { "aria-label": "Increase font size", "title": "Increase font size", "children": DashIconify(icon="mdi:format-font-size-increase", width=16), "onClick": {"function": "increaseFontSize"}, }, }, { "CustomControl": { "aria-label": "Decrease font size", "title": "Decrease font size", "children": DashIconify(icon="mdi:format-font-size-decrease", width=16), "onClick": {"function": "decreaseFontSize"}, }, }, ], ], }, ) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; function changeFontSize(editor, delta) { if (!editor) return; const { from, to } = editor.state.selection; let size = 16; // default editor.state.doc.nodesBetween(from, to, (node) => { if (node.isText) { const mark = node.marks.find(m => m.type.name === "textStyle"); if (mark?.attrs.fontSize) { size = parseInt(mark.attrs.fontSize, 10); } } }); const newSize = Math.min(Math.max(size + delta, 8), 72) + "px"; editor.chain().focus().setFontSize(newSize).run(); } dmcfuncs.increaseFontSize = ({ editor }) => changeFontSize(editor, 2); dmcfuncs.decreaseFontSize = ({ editor }) => changeFontSize(editor, -2); ``` ### Selected text The `selected` prop contains the currently selected text. Note that it is text only and does not include any formatting. ```python from dash import Input, Output, html, callback import dash_mantine_components as dmc component = html.Div( [ dmc.RichTextEditor( html="Welcome to the editor.
Select some text
", extensions=[ "StarterKit", ], toolbar={ "controlsGroups": [ [ "Bold", "Italic", "Underline", "Strikethrough", "Highlight", ], ] }, id="rte", ), dmc.Box(id="rte-selected", mt="lg"), ] ) @callback(Output("rte-selected", "children"), Input("rte", "selected")) def update_content(content: str): return f"Your selected text: {content}" ``` ### Accessing the Editor Instance clientside The `dash_mantine_components.getEditor(id)` function provides direct access to the underlying Tiptap editor instance in clientside callbacks. This allows you full access to the editor API including executing commands, inspecting content, and updating the editor state. See the [Tiptap editor API](https://tiptap.dev/docs/editor/api/commands) for more details. This returns the Tiptap editor instance for the specified component ID, or `undefined` if the editor doesn't exist: ```javascript const editor = dash_mantine_components.getEditor('editor-id'); ``` This example shows how to access the editor in a clientside callback and provide a word count of the content. ```python 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="Try typing some text in this editor. Click the button below to see your character and word count.
" ), 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"), ) ``` ### Debounce The `debounce` prop controls how updates to the `html`, `json`, and `selected` props are triggered in the `RichTextEditor`. Enabling debounce helps prevent excessive callbacks by delaying updates until the user stops interacting. If set to `True`, updates occur only when the editor loses focus. Alternatively, you can specify a delay in milliseconds to fine-tune when updates should be sent. ```python dmc.RichTextEditor( debounce=500 # # Delay updates by 500ms ) ``` ### Persistence Dash provides built-in persistence props that allow components to retain their values across page reloads or app sessions. In `RichTextEditor`, this means the editor content can be saved and restored automatically. The following persistence-related props are available: - `persistence` – Enables persistence (`True`, `"local"`, `"session"`, or `"memory"`). - `persisted_props` – Specifies which props should be persisted. By default it's `["html, json"]` - `persistence_type` – Defines where the data is stored (`"local"`, `"session"`, or `"memory"`). For more details on how Dash handles persistence, refer to the [Dash persistence documentation](https://dash.plotly.com/persistence). Notes: - The component must have an `id` for persistence to work. - If you want to set an initial value while also enabling persistence, set `persisted_props` to only the prop used for the initial value. For example `persisted_props=['html']`. ### CSS Extensions As of DMC 1.2.0, RichTextEditor component styles are bundled automatically, so you no longer need to include a separate CSS file. If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets. ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### RichTextEditor Selectors | Selector | Static Selector | Description | |----------------------------------|------------------------------------------------------|-------------| | `root` | `.mantine-RichTextEditor-root` | Root element | | `toolbar` | `.mantine-RichTextEditor-toolbar` | Toolbar element | | `content` | `.mantine-RichTextEditor-content` | Content area | | `typographyStylesProvider` | `.mantine-RichTextEditor-typographyStylesProvider` | TypographyStylesProvider component, wraps content | | `control` | `.mantine-RichTextEditor-control` | `RichTextEditor.Control` root element, used as a base for all controls | | `controlIcon` | `.mantine-RichTextEditor-controlIcon` | Control icon element | | `controlsGroup` | `.mantine-RichTextEditor-controlsGroup` | `RichTextEditor.ControlsGroup` component root | | `linkEditor` | `.mantine-RichTextEditor-linkEditor` | Link editor root element | | `linkEditorSave` | `.mantine-RichTextEditor-linkEditorSave` | Link editor save button | | `linkEditorInput` | `.mantine-RichTextEditor-linkEditorInput` | Link editor URL input | | `linkEditorExternalControl` | `.mantine-RichTextEditor-linkEditorExternalControl` | Link editor external button | | `linkEditorDropdown` | `.mantine-RichTextEditor-linkEditorDropdown` | Link editor popover dropdown element | #### RichTextEditor Data Attributes | Selector | Attribute | Condition | |-----------|--------------|---------------------------| | `control` | `data-active` | Control is active | ### Keyword Arguments #### RichTextEditor - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - debounce (number | boolean; optional): If True, changes will be sent back to Dash only when losing focus. If False, data will be sent on every change. If a number, data will be sent when the value has been stable for that number of milliseconds. - editable (boolean; optional): If True, the editor will be editable. True by default. - extensions (list; optional): List of extensions to be loaded by the editor. Each item can be either a string with the extension name (e.g. 'Color') or an object with the extension name as key and options as value (e.g. {'TextAlign': {'types': ['heading', 'paragraph']}}). ['StarterKit', 'Underline', 'Link', 'Superscript', 'Subscript', 'Highlight', 'Table', 'TableCell', 'TableHeader', 'TableRow', {'Placeholder': {'placeholder': 'Write or paste content here...'}}, {'TextAlign': {'types': ['heading', 'paragraph']}}, 'Color', 'TextStyle', 'Image'] by default. - focus (number | boolean; optional): If True, the editor will be focused. If False, the editor will be blurred. Can also be a string ('start', 'end', 'all') or number to focus at a specific position. Positive values start at the beginning of the document - negative values at the end. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - html (string; optional): HTML string representation of the editor content. Affected by debounce. If both json and html are provided, json takes precedence. - json (dict; optional): JSON object (ProseMirror) representation of the editor content. Affected by debounce. If both json and html are provide, json takes precedence. - labels (dict; optional): Labels that are used in controls. If not set, default labels are used. `labels` is a dict with keys: - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - n_blur (number; optional): An integer that represents the number of times that this element has lost focus. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - selected (string; optional): Currently selected text. Affected by debounce. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - toolbar (dict; optional): Toolbar property definition. Empty by default. `toolbar` is a dict with keys: - variant (a value equal to: 'default', 'subtle'; optional): Variant of the editor. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withCodeHighlightStyles (boolean; optional): Determines whether code highlight styles should be added, True by default. - withTypographyStyles (boolean; optional): Determines whether typography styles should be added, True by default. ## SegmentedControl SegmentedControl is an alternative to RadioGroup and allows users to select an option from a small set of options. Category: Inputs ### Simple Example SegmentedControl is usually used as an alternative to Tabs (to switch views) and RadioGroup (to capture user feedback limited to certain options) ```python import dash_mantine_components as dmc from dash import Output, Input, html, callback component = html.Div( [ dmc.SegmentedControl( id="segmented", value="ng", data=[ {"value": "react", "label": "React"}, {"value": "ng", "label": "Angular"}, {"value": "svelte", "label": "Svelte"}, {"value": "vue", "label": "Vue"}, ], mb=10, ), dmc.Text(id="segmented-value"), ] ) @callback(Output("segmented-value", "children"), Input("segmented", "value")) def select_value(value): return value ``` ### Data Prop The data can be provided as either: * an array of strings - use when label and value are same. * an array of dicts with `label` and `value` properties (plus an optional `disabled` boolean). ```python data = ["React", "Angular", "Svelte", "Vue"] # or data = [ {"value": "React", "label": "React"}, {"value": "Angular", "label": "Angular"}, {"value": "Svelte", "label": "Svelte", "disabled": True}, {"value": "Vue", "label": "Vue"}, ] ``` ### Disabled To disable the entire component, use the `disabled` prop. To disable a SegmentedControl item, use the array of objects data format and set `disabled = True` on the item that you want to disable. ```python import dash_mantine_components as dmc component = dmc.Stack( [ dmc.Text("Disabled control"), dmc.SegmentedControl( disabled=True, data=[ {"value": "preview", "label": "Preview"}, {"value": "code", "label": "Code"}, {"value": "export", "label": "Export"}, ], ), dmc.Text("Disabled option"), dmc.SegmentedControl( data=[ {"value": "preview", "label": "Preview", "disabled": True}, {"value": "code", "label": "Code"}, {"value": "export", "label": "Export"}, ], ), ], align="flex-start", ) ``` ### Full Width and Orientation By default, SegmentedControl will take only the amount of space that is required to render elements. Set `fullWidth` prop to make it block and take 100% width of its container. The orientation can be set via `orientation` prop. ```python import dash_mantine_components as dmc dmc.SegmentedControl( orientation="horizontal", fullWidth=True, data=[] ) ``` ### Sizes SegmentedControl supports 5 sizes: xs, sm, md, lg, xl. Size controls font-size and padding properties. ```python import dash_mantine_components as dmc data = ["Dash", "Mantine", "Bootstrap", "Core"] component = dmc.Stack( [dmc.SegmentedControl(data=data, size=x) for x in ["xs", "sm", "md", "lg", "xl"]], align="flex-start", ) ``` ### Radius xs, sm, md, lg, xl radius values are defined in theme.radius. Alternatively, you can use a number to set radius in px. ```python import dash_mantine_components as dmc data = ["Dash", "Mantine", "Bootstrap", "Core"] component = dmc.Stack( [dmc.SegmentedControl(data=data, radius=x) for x in [0, "md", "lg", 20]], align="flex-start", ) ``` ### Color By default, SegmentedControl uses theme.white with shadow in light color scheme and theme.colors.dark[6] background color for active element. You can choose any color defined in theme.colors in case you need colored variant. ```python import dash_mantine_components as dmc dmc.SegmentedControl( color="red", data = [] ) ``` ### Transitions Change transition properties with: - `transitionDuration` – all transitions duration in ms (ignored if user prefers to reduce motion) - `transitionTimingFunction` – defaults to `theme.transitionTimingFunction` ```python import dash_mantine_components as dmc data = ["Dash", "Mantine", "Bootstrap", "Core"] component = dmc.Stack( [ dmc.Text("No transition"), dmc.SegmentedControl(data=data, transitionDuration=0), dmc.Text("500ms linear transition"), dmc.SegmentedControl( data=data, transitionDuration=500, transitionTimingFunction="linear" ), ], align="flex-start", ) ``` ### Components in label ```python import dash_mantine_components as dmc from dash import Output, Input, html, callback from dash_iconify import DashIconify data = [ ["Preview", "tabler:eye"], ["Code", "tabler:code"], ["Export", "tabler:external-link"], ] component = html.Div( [ dmc.SegmentedControl( id="segmented-with-react-nodes", value="Preview", data=[ { "value": v, "label": dmc.Center( [DashIconify(icon=icon, width=16), html.Span(v)], style={"gap": 10}, ), } for v, icon in data ], mb=10, ), dmc.Text(id="segmented--value-data"), ] ) @callback( Output("segmented--value-data", "children"), Input("segmented-with-react-nodes", "value"), ) def update_value(value): return value ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:-----------|:-------------------------------------|:--------------------------------------------------------| | root | .mantine-SegmentedControl-root | Root element | | control | .mantine-SegmentedControl-control | Wrapper element for input and label | | input | .mantine-SegmentedControl-input | Input element hidden by default | | label | .mantine-SegmentedControl-label | Label element associated with input | | indicator | .mantine-SegmentedControl-indicator | Floating indicator that moves between items | | innerLabel | .mantine-SegmentedControl-innerLabel | Wrapper of label element children | ### Keyword Arguments #### SegmentedControl - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether text color should depend on `background-color` of the indicator. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, changes color of indicator, by default color is based on current color scheme. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data (list of strings; required): Data based on which controls are rendered. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): Determines whether the component is disabled. - fullWidth (boolean; optional): Determines whether the component should take 100% width of its parent, `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - name (string; optional): Name of the radio group, by default random name is generated. - orientation (a value equal to: 'horizontal', 'vertical'; optional): Determines in which orientation component id displayed, `'horizontal'` by default. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default. - readOnly (boolean; optional): Determines whether the value can be changed. - size (optional): Controls `font-size`, `padding` and `height` properties, `'sm'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - transitionDuration (number; optional): Indicator `transition-duration` in ms, set `0` to turn off transitions, `200` by default. - transitionTimingFunction (string; optional): Indicator `transition-timing-function` property, `ease` by default. - value (string; optional): Controlled component value. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withItemsBorders (boolean; optional): Determines whether there should be borders between items, `True` by default. ## Slider Use Slider component to capture user feedback from a range of values. Category: Inputs ### Introduction ### Simple Usage Use the `value` prop to get the value of the slider. ```python import dash_mantine_components as dmc from dash import callback, html, Output, Input component = html.Div( [ dmc.Slider( id="slider-callback", value=26, marks=[ {"value": 20, "label": "20%"}, {"value": 50, "label": "50%"}, {"value": 80, "label": "80%"}, ], mb=35, ), dmc.Text(id="slider-output"), ] ) @callback(Output("slider-output", "children"), Input("slider-callback", "value")) def update_value(value): return f"You have selected: {value}" ``` ### Range Slider Note: The `RangeSlider` has a `minRange` prop that defaults to 10. Make sure `minRange` is not greater than the slider's maximum value, or the slider won't work properly. ```python import dash_mantine_components as dmc from dash import callback, html, Output, Input component = html.Div( [ dmc.RangeSlider( id="range-slider-callback", value=[26, 50], marks=[ {"value": 20, "label": "20%"}, {"value": 50, "label": "50%"}, {"value": 80, "label": "80%"}, ], mb=35, ), dmc.Text(id="range-slider-output"), ] ) @callback( Output("range-slider-output", "children"), Input("range-slider-callback", "value") ) def update_value(value): return f"You have selected: [{value[0]}, {value[1]}]" ``` ### minRange Use `minRange` prop to control minimum range between from and to values in `RangeSlider`. The default value is 10. The example below shows how to use `minRange` prop to capture decimal values from the user: ```python import dash_mantine_components as dmc component = dmc.RangeSlider( minRange=0.2, min=0, max=1, step=0.0005, value=[0.1245, 0.5535] ) ``` ### Update Mode By default, slider value is updated once the user has stopped dragging the handle. But it can be changed by changing the `updatemode` to "drag" instead of "mouseup" (default). Below is a slider with `updatemode` set to "drag", observe how the output text changes as you drag the slider handle. ```python import dash_mantine_components as dmc from dash import callback, html, Output, Input component = html.Div( [ dmc.Slider( id="drag-slider", value=26, updatemode="drag", marks=[ {"value": 20, "label": "20%"}, {"value": 50, "label": "50%"}, {"value": 80, "label": "80%"}, ], ), dmc.Space(h=35), dmc.Text(id="drag-output"), ] ) @callback(Output("drag-output", "children"), Input("drag-slider", "value")) def update_value(value): return f"You have selected: {value}" ``` ### Control label To change label behavior and appearance, set the following props: - `label` – set to `None` to disable the label. You can also provide a formatter function (via `{"function": "..."}`) to customize the label text. The function receives the `value` as its argument. - `labelAlwaysOn` – if `True` – label will always be displayed, by default label is visible only when user is dragging - `labelTransitionProps` – props passed down to the `Transition` component, can be used to customize label animation 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 component = dmc.Stack([ dmc.Text("No label", size="sm"), dmc.Slider(value=40, label=None), dmc.Text("Label formatted with a function", size="sm", mt="xl"), dmc.Slider( value=40, label={"function": "celsiusLabel"} ), dmc.Text("Label always visible", size="sm", mt="xl"), dmc.Slider(value=40, labelAlwaysOn=True), dmc.Text("Custom label transition", size="sm", mt="xl"), dmc.Slider( value=40, labelTransitionProps={ "transition": "skew-down", "duration": 150, "timingFunction": "linear" } ), ]) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; dmcfuncs.celsiusLabel = (value) => `${value} °C`; ``` ### Min, Max, and Step You can set `min`, `max` and `step` values for `Slider` component. This will work even for negative and decimal values. ```python import dash_mantine_components as dmc component = dmc.Slider(min=-10, max=10, step=0.5) ``` The following example uses a function to format the `label` 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 marks = [ {"value": 0, "label": "xs"}, {"value": 25, "label": "sm"}, {"value": 50, "label": "md"}, {"value": 75, "label": "lg"}, {"value": 100, "label": "xl"}, ] component = dmc.Container([ dmc.Text("Decimal step"), dmc.Slider( value=0, min=-10, max=10, step=0.1, label={"function": "formatDecimal"}, styles={"markLabel": {"display": "none"}}, ), dmc.Text("Step matched with marks", mt="md"), dmc.Slider( value=50, step=25, marks=marks, label={"function": "labelFromMarks", "options": {"marks": marks}}, styles={"markLabel": {"display": "none"}}, ), ], p="xl") ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; dmcfuncs.formatDecimal = function (value) { return value.toFixed(1); }; dmcfuncs.labelFromMarks = function (value, { marks }) { const match = marks.find(m => m.value === value); return match ? match.label : null; }; ``` ### Domain By default, min and max values define the possible range of values. `domain` prop allows setting the possible range of values independently of the min and max values: ```python import dash_mantine_components as dmc component = dmc.Slider( domain=[0, 100], min=10, max=90, value=25, marks=[ { "value": 10, "label": 'min' }, { "value": 90, "label": 'max' }, ] ) ``` ### pushOnOverlap `pushOnOverlap` prop controls whether the thumbs should push each other when they overlap. By default, `pushOnOverlap` is `True`, if you want to disable this behavior, set it to `False`. Example of `pushOnOverlap=False`: ```python import dash_mantine_components as dmc component = dmc.RangeSlider( pushOnOverlap=False, minRange=20, value=[25, 65] ) ``` ### Marks Add any number of marks to the Slider by setting `marks` prop to an array of objects. ```python marks = [ { "value": 20 }, # displays mark on slider track { "value": 40, "label": '40%' }, # adds mark label below slider track ] ``` ### Restrict selection to marks Setting `restrictToMarks=True` ensures that users can only select values matching the specific marks defined. This feature is especially helpful when you have uneven or non-standard marks and want to ensure users can only pick from those specific points. Note: The `step` prop is ignored when `restrictToMarks=True`. ```python import dash_mantine_components as dmc component = dmc.Stack( [ # Slider dmc.Slider( restrictToMarks=True, value=25, marks=[{"value": index * 25} for index in range(5)], ), # RangeSlider dmc.RangeSlider( restrictToMarks=True, value=[5, 15], marks=[ {"value": 5}, {"value": 15}, {"value": 25}, {"value": 35}, {"value": 70}, {"value": 80}, {"value": 90}, ], ), ] ) ``` ### Disabled ```python import dash_mantine_components as dmc component = dmc.Stack( [ dmc.Slider(value=60, disabled=True), dmc.RangeSlider( mt="xl", mb="xl", value=[25, 75], disabled=True, marks=[ {"value": 0, "label": "xs"}, {"value": 25, "label": "sm"}, {"value": 50, "label": "md"}, {"value": 75, "label": "lg"}, {"value": 100, "label": "xl"}, ], ), ] ) ``` ### Thumb size ```python import dash_mantine_components as dmc component = dmc.Stack( [ dmc.Text("Standard size", size="sm"), dmc.Slider(value=40, label=None), dmc.Text("Thumb size number", size="sm", mt="xl"), dmc.Slider(value=40, thumbSize=50), ] ) ``` ### Thumb children ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = [ dmc.Slider( thumbChildren=DashIconify(icon="mdi:heart", width=16), color="red", label=None, value=40, thumbSize=26, styles={"thumb": {"borderWidth": 2, "padding": 3}}, ), dmc.RangeSlider( mt="xl", styles={"thumb": {"borderWidth": 2, "padding": 3}}, color="red", label=None, value=[20, 60], thumbSize=26, thumbChildren=[ DashIconify(icon="mdi:heart", width=16), DashIconify(icon="mdi:heart-broken", width=16), ], ), ] ``` ### Scale You can use the scale prop to represent the value on a different scale. In the following demo, the value x represents the value 2^x. Increasing x by one increases the represented value by 2 to the power of x. Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document. ### Inverted You can invert the track by setting `inverted=True`: ```python import dash_mantine_components as dmc component = dmc.Stack( [ dmc.Slider(inverted=True, value=80), dmc.RangeSlider(inverted=True, value=[40, 60], mt="xl"), ] ) ``` ### Dash 4 Slider and RangeSlider The Dash 4 [`dcc.Slider`](https://dash.plotly.com/dash-core-components/slider) and `dcc.RangeSlider` components supports some features that are not available in DMC, for example integrated numeric input fields and vertical sliders. To style the `dcc.Slider` with a Mantine theme see the [Dash 4 components](/dash4-components) section. ### Styling the Slider The `Slider` component can be fully customized using Mantine's Styles API. Each element of the `Slider` - from the thumb to the track markers - has its own unique selector that can be styled independently. Try the [interactive example](https://mantine.dev/core/slider/#styles-api) in the upstream Mantine documentation to see how these selectors correspond to different parts of the Slider component. Below, you'll find a comprehensive reference of all available selectors, CSS variables, and data attributes. Here is an example: ```python import dash_mantine_components as dmc component = dmc.Slider( value=79, marks=[ {"value": 20, "label": "20%"}, {"value": 50, "label": "50%"}, {"value": 80, "label": "80%"}, ], size=2, classNames={ "track": "dmc-slider-track", "mark": "dmc-slider-mark", "markLabel": "dmc-slider-markLabel", "thumb": "dmc-slider-thumb", }, ) ``` ```css .dmc-slider-track { &::before { background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3)); } } .dmc-slider-mark { width: 6px; height: 6px; border-radius: 6px; transform: translateX(-3px) translateY(-2px); border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3)); &[data-filled] { border-color: var(--mantine-color-blue-6); } } .dmc-slider-markLabel { font-size: var(--mantine-font-size-sm); color: var(--mantine-color-green-5); margin-bottom: 5px; margin-top: 0; } .dmc-slider-thumb { height: 16px; width: 16px; background-color: var(--mantine-color-green-5); border-width: 1px; box-shadow: var(--mantine-shadow-lg); } ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Slider selectors | Selector | Static selector | Description | |----------|----------------|-------------| | root | `.mantine-Slider-root` | Root element | | label | `.mantine-Slider-label` | Thumb label | | thumb | `.mantine-Slider-thumb` | Thumb element | | trackContainer | `.mantine-Slider-trackContainer` | Wraps track element | | track | `.mantine-Slider-track` | Slider track | | bar | `.mantine-Slider-bar` | Track filled part | | markWrapper | `.mantine-Slider-markWrapper` | Contains `mark` and `markLabel` elements | | mark | `.mantine-Slider-mark` | Mark displayed on track | | markLabel | `.mantine-Slider-markLabel` | Label of the associated mark, displayed below track | #### Slider CSS variables | Selector | Variable | Description | |----------|----------|-------------| | root | `--slider-size` | Controls track `height` | | root | `--slider-color` | Controls filled track, thumb and marks `background` | | root | `--slider-thumb-size` | Controls thumb `width` and `height` | | root | `--slider-radius` | Controls `border-radius` of track and thumb | #### Slider data attributes | Selector | Attribute | Condition | |----------|-----------|-----------| | trackContainer, track, bar, thumb, mark | `data-disabled` | `disabled` prop is set | | track, bar | `data-inverted` | `inverted` prop is set | | thumb | `data-dragging` | slider is being dragged | | mark | `data-filled` | mark position is less or equal slider value | ### Keyword Arguments #### Slider - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, controls color of track and thumb, `theme.primaryColor` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): Disables slider. - domain (list of 2 elements: [number, number]; optional): Domain of the slider, defines the full range of possible values, `[min, max]` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inverted (boolean; optional): Determines whether track value representation should be inverted, `False` by default. - label (a list of or a singular dash component, string or number; optional): Function to generate label (See https://www.dash-mantine-components.com/functions-as-props) or any react node to render instead, set to None to disable label. - labelAlwaysOn (boolean; optional): Determines whether the label should be visible when the slider is not being dragged or hovered, `False` by default. - labelTransitionProps (dict; optional): Props passed down to the `Transition` component, `{ transition: 'fade', duration: 0 }` by default. `labelTransitionProps` is a dict with keys: - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - marks (list of dicts; optional): Marks displayed on the track. `marks` is a list of dicts with keys: - max (number; optional): Maximum possible value, `100` by default. - min (number; optional): Minimal possible value, `0` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - name (string; optional): Hidden input name, use with uncontrolled component. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - precision (number; optional): Number of significant digits after the decimal point. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `'xl'` by default. - restrictToMarks (boolean; optional): Determines whether the selection should be only allowed from the given marks array, False by default. - scale (boolean | number | string | dict | list; optional): Function to generate scale (See https://www.dash-mantine-components.com/functions-as-props) A transformation function to change the scale of the slider. - showLabelOnHover (boolean; optional): Determines whether the label should be displayed when the slider is hovered, `True` by default. - size (number; optional): Controls size of the track, `'md'` by default. - step (number; optional): Number by which value will be incremented/decremented with thumb drag and arrows, `1` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - thumbChildren (a list of or a singular dash component, string or number; optional): Content rendered inside thumb. - thumbLabel (string; optional): Thumb `aria-label`. - thumbSize (string | number; optional): Thumb `width` and `height`, by default value is computed based on `size` prop. - updatemode (a value equal to: 'mouseup', 'drag'; default 'mouseup'): Determines when the component should update its value property. If mouseup (the default) then the slider will only trigger its value when the user has finished dragging the slider. If drag, then the slider will update its value continuously as it is being dragged. - value (number; optional): Controlled component value. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### RangeSlider - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, controls color of track and thumb, `theme.primaryColor` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): Disables slider. - domain (list of 2 elements: [number, number]; optional): Domain of the slider, defines the full range of possible values, `[min, max]` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inverted (boolean; optional): Determines whether track values representation should be inverted, `False` by default. - label (a list of or a singular dash component, string or number; optional): Function to generate label (See https://www.dash-mantine-components.com/functions-as-props) or any react node to render instead, set to None to disable label. - labelAlwaysOn (boolean; optional): Determines whether the label should be visible when the slider is not being dragged or hovered, `False` by default. - labelTransitionProps (dict; optional): Props passed down to the `Transition` component, `{ transition: 'fade', duration: 0 }` by default. `labelTransitionProps` is a dict with keys: - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - marks (list of dicts; optional): Marks displayed on the track. `marks` is a list of dicts with keys: - max (number; optional): Maximum possible value, `100` by default. - maxRange (number; optional): Maximum range interval, `Infinity` by default. - min (number; optional): Minimal possible value, `0` by default. - minRange (number; optional): Minimal range interval, `10` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - name (string; optional): Hidden input name, use with uncontrolled component. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - precision (number; optional): Number of significant digits after the decimal point. - pushOnOverlap (boolean; optional): Determines whether the other thumb should be pushed by the current thumb dragging when minRange/maxRange is reached, True by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `'xl'` by default. - restrictToMarks (boolean; optional): Determines whether the selection should be only allowed from the given marks array, False by default. - scale (boolean | number | string | dict | list; optional): Function to generate scale (See https://www.dash-mantine-components.com/functions-as-props) A transformation function to change the scale of the slider. - showLabelOnHover (boolean; optional): Determines whether the label should be displayed when the slider is hovered, `True` by default. - size (number; optional): Controls size of the track, `'md'` by default. - step (number; optional): Number by which value will be incremented/decremented with thumb drag and arrows, `1` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - thumbChildren (a list of or a singular dash component, string or number; optional): Content rendered inside thumb. - thumbFromLabel (string; optional): First thumb `aria-label`. - thumbSize (string | number; optional): Thumb `width` and `height`, by default value is computed based on `size` prop. - thumbToLabel (string; optional): Second thumb `aria-label`. - updatemode (a value equal to: 'mouseup', 'drag'; default 'mouseup'): Determines when the component should update its value property. If mouseup (the default) then the Rangeslider will only trigger its value when the user has finished dragging the Rangeslider. If drag, then the Rangeslider will update its value continuously as it is being dragged. - value (list of 2 elements: [number, number]; optional): Controlled component value. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Switch Use the Switch component to capture boolean input from user. Category: Inputs ### Introduction ### Callbacks Use the property `checked` to use dmc.Switch in callbacks. ```python import dash_mantine_components as dmc from dash import html, Output, Input, callback component = html.Div( [ dmc.Switch(id="switch-example", label="Use default settings.", checked=True), dmc.Space(h=10), dmc.Text(id="switch-settings"), ] ) @callback(Output("switch-settings", "children"), Input("switch-example", "checked")) def settings(checked): return f"Using {'default' if checked else 'custom'} settings" ``` ### Inner Labels ```python import dash_mantine_components as dmc component = dmc.Group( [ dmc.Switch(onLabel="ON", offLabel="OFF", radius="xl", size=x) for x in ["xs", "sm", "md", "lg", "xl"] ] ) ``` ### Radius and Size Set the radius and size of the Switch component using the `radius` and `size` prop respectively. ```python import dash_mantine_components as dmc dmc.Switch( size="lg", radius="sm", label="Enable this option", checked=True ) ``` ### Icon Labels You can also add icons in the switch labels. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Switch( offLabel=DashIconify(icon="radix-icons:moon", width=20), onLabel=DashIconify(icon="radix-icons:sun", width=20), size="xl", ) ``` ### Thumb Icon ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Switch( thumbIcon=DashIconify( icon="tabler:walk", width=16, color= "var(--mantine-color-teal-5)" ), size="lg", color="teal", checked=True, ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:-------------|:-----------------------------|:------------------------------------------------| | root | .mantine-Switch-root | Root element | | track | .mantine-Switch-track | Switch track, contains `thumb` and `trackLabel` | | trackLabel | .mantine-Switch-trackLabel | Label displayed inside `track` | | thumb | .mantine-Switch-thumb | Thumb displayed inside `track` | | input | .mantine-Switch-input | Input element, hidden by default | | body | .mantine-Switch-body | Input body, contains all other elements | | labelWrapper | .mantine-Switch-labelWrapper | Contains `label`, `description` and `error` | | label | .mantine-Switch-label | Label element | | description | .mantine-Switch-description | Description displayed below the label | | error | .mantine-Switch-error | Error message displayed below the label | ### Keyword Arguments #### Switch - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - checked (boolean; optional): State of check box. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color to set input color in checked state, `theme.primaryColor` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - description (a list of or a singular dash component, string or number; optional): Description displayed below the label. - disabled (boolean; optional): A checkbox can show it is currently unable to be interacted with. - error (a list of or a singular dash component, string or number; optional): Error displayed below the label. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - label (a list of or a singular dash component, string or number; optional): Content of the `label` associated with the radio. - labelPosition (a value equal to: 'left', 'right'; optional): Position of the label relative to the input, `'right'` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - offLabel (a list of or a singular dash component, string or number; optional): Inner label when the `Switch` is in unchecked state. - onLabel (a list of or a singular dash component, string or number; optional): Inner label when the `Switch` is in checked state. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default. - size (optional): Controls size of all elements. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - thumbIcon (a list of or a singular dash component, string or number; optional): Icon inside the thumb of the switch. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withThumbIndicator (boolean; optional): If set, the indicator will be displayed inside thumb, `True` by default. - wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the root element. ## TextInput Use TextInput component to capture string input from user. Customize the input with label, description, error message etc. Category: Inputs ### Introduction ### Invalid State and Error Use `error` prop to convey an error with an error message and a red border around the input. Note: Dash adds thick red outline to the input element with `:invalid` pseudo-class. This conflicts with Mantine. In order to correct this, just add the following css to your app. ```css input:invalid { outline: none !important; } ``` ```python import dash_mantine_components as dmc component = dmc.Stack( children=[ dmc.TextInput(label="Your Email:", w=200, error=True), dmc.TextInput(label="Your Email:", w=200, error="Enter a valid email"), ], ) ``` ### Disabled State Convey disabled input with `disabled` prop. ```python import dash_mantine_components as dmc component = dmc.TextInput(label="Disabled Input", w=200, disabled=True) ``` ### With Icon Add icon to the left side of the input. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.TextInput( label="Your Email", w=200, placeholder="Your Email", leftSection=DashIconify(icon="ic:round-alternate-email"), ) ``` ### With right section Add icon or loading indicator to the right section of the input. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Stack( children=[ dmc.TextInput( w=200, placeholder="9876543210", rightSection=DashIconify(icon="emojione-v1:mobile-phone"), ), dmc.TextInput( w=200, placeholder="9876543210", rightSection=dmc.Loader(size="xs"), ), ], ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------|:-------------------------------|:-------------------------------------------------| | wrapper | .mantine-TextInput-wrapper | Root element of the Input | | input | .mantine-TextInput-input | Input element | | section | .mantine-TextInput-section | Left and right sections | | root | .mantine-TextInput-root | Root element | | label | .mantine-TextInput-label | Label element | | required | .mantine-TextInput-required | Required asterisk element, rendered inside label | | description | .mantine-TextInput-description | Description element | | error | .mantine-TextInput-error | Error element | ### Keyword Arguments #### TextInput - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoComplete (string; default 'off'): (string; default "off") Enables the browser to attempt autocompletion based on user history. For more information, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - debounce (number | boolean; default False): (boolean | number; default False): If True, changes to input will be sent back to the Dash server only on enter or when losing focus. If it's False, it will send the value back on every change. If a number, it will not send anything back to the Dash server until the user has stopped typing for that number of milliseconds. - description (a list of or a singular dash component, string or number; optional): Contents of `Input.Description` component. If not set, description is not rendered. - descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Description` component. - disabled (boolean; optional): Sets `disabled` attribute on the `input` element. - error (a list of or a singular dash component, string or number; optional): Contents of `Input.Error` component. If not set, error is not rendered. - errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Error` component. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input` component. - inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional): Controls order of the elements, `['label', 'description', 'input', 'error']` by default. - label (a list of or a singular dash component, string or number; optional): Contents of `Input.Label` component. If not set, label is not rendered. - labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Label` component. - leftSection (a list of or a singular dash component, string or number; optional): Content section rendered on the left side of the input. - leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `leftSection` element, `'none'` by default. - leftSectionProps (dict; optional): Props passed down to the `leftSection` element. - leftSectionWidth (string | number; optional): Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - n_blur (number; default 0): An integer that represents the number of times that this element has lost focus. - n_submit (number; default 0): An integer that represents the number of times that this element has been submitted. - name (string; optional): Name prop. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - placeholder (string; optional): Placeholder. - pointer (boolean; optional): Determines whether the input should have `cursor: pointer` style, `False` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default. - readOnly (boolean; optional): Readonly. - required (boolean; optional): Adds required attribute to the input and a red asterisk on the right side of label, `False` by default. - rightSection (a list of or a singular dash component, string or number; optional): Content section rendered on the right side of the input. - rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `rightSection` element, `'none'` by default. - rightSectionProps (dict; optional): Props passed down to the `rightSection` element. - rightSectionWidth (string | number; optional): Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height. - size (optional): Controls input `height` and horizontal `padding`, `'sm'` by default. - spellCheck (boolean; optional): Spell check property. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; default ''): Value for controlled input. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withAsterisk (boolean; optional): Determines whether the required asterisk should be displayed. Overrides `required` prop. Does not add required attribute to the input. `False` by default. - withErrorStyles (boolean; optional): Determines whether the input should have red border and red text color when the `error` prop is set, `True` by default. - wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the root element. ## Textarea Use Textarea component to capture string input in a text area with an auto-size variant. Customize the input with label, description, error message etc. Category: Inputs ### Introduction ### Autosize Textarea will grow until `maxRows` are reached or indefinitely if `maxRows` is not set. ```python import dash_mantine_components as dmc component = dmc.Stack( children=[ dmc.Textarea( label="Autosize with no rows limit", placeholder="Autosize with no rows limit", w=500, autosize=True, minRows=2, ), dmc.Textarea( label="Autosize with 4 rows max", placeholder="Autosize with 4 rows max", w=500, autosize=True, minRows=2, maxRows=4, ), ], ) ``` ### Invalid State and Error Use `error` prop to convey an error with an error message and a red border around the input. Note: Dash adds thick red outline to the input element with `:invalid` pseudo-class. This conflicts with Mantine. In order to correct this, just add the following css to your app. ```css input:invalid { outline: none !important; } ``` ```python import dash_mantine_components as dmc component = dmc.Stack( children=[ dmc.Textarea(label="Your message", w=500, error=True), dmc.Textarea(label="Your message", w=500, error="Message can't be empty!"), ], ) ``` ### inputProps Use the `inputProps` dictionary to pass attributes directly to the underlying [`` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes). In this example, `maxLength` is used to limit the number of characters a user can enter. ```python import dash_mantine_components as dmc component = dmc.Textarea( inputProps={"maxLength": 3}, label="Enter text", description="Max length of 3 characters", ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------|:------------------------------|:-------------------------------------------------| | wrapper | .mantine-Textarea-wrapper | Root element of the Input | | input | .mantine-Textarea-input | Input element | | section | .mantine-Textarea-section | Left and right sections | | root | .mantine-Textarea-root | Root element | | label | .mantine-Textarea-label | Label element | | required | .mantine-Textarea-required | Required asterisk element, rendered inside label | | description | .mantine-Textarea-description | Description element | | error | .mantine-Textarea-error | Error element | ### Keyword Arguments #### Textarea - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoComplete (string; default 'off'): (string; default "off") Enables the browser to attempt autocompletion based on user history. For more information, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. - autosize (boolean; optional): Determines whether the textarea height should grow with its content, `False` by default. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - debounce (number | boolean; default False): (boolean | number; default False): If True, changes to input will be sent back to the Dash server only on enter or when losing focus. If it's False, it will send the value back on every change. If a number, it will not send anything back to the Dash server until the user has stopped typing for that number of milliseconds. - description (a list of or a singular dash component, string or number; optional): Contents of `Input.Description` component. If not set, description is not rendered. - descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Description` component. - disabled (boolean; optional): Sets `disabled` attribute on the `input` element. - error (a list of or a singular dash component, string or number; optional): Contents of `Input.Error` component. If not set, error is not rendered. - errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Error` component. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input` component. - inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional): Controls order of the elements, `['label', 'description', 'input', 'error']` by default. - label (a list of or a singular dash component, string or number; optional): Contents of `Input.Label` component. If not set, label is not rendered. - labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Label` component. - leftSection (a list of or a singular dash component, string or number; optional): Content section rendered on the left side of the input. - leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `leftSection` element, `'none'` by default. - leftSectionProps (dict; optional): Props passed down to the `leftSection` element. - leftSectionWidth (string | number; optional): Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - maxRows (number; optional): Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set. - minRows (number; optional): Minimum rows of autosize textarea, ignored if `autosize` prop is not set. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - n_blur (number; default 0): An integer that represents the number of times that this element has lost focus. - n_submit (number; default 0): An integer that represents the number of times that this element has been submitted. - name (string; optional): Name prop. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - placeholder (string; optional): Placeholder. - pointer (boolean; optional): Determines whether the input should have `cursor: pointer` style, `False` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default. - readOnly (boolean; optional): Readonly. - required (boolean; optional): Adds required attribute to the input and a red asterisk on the right side of label, `False` by default. - resize (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'block', 'inline', 'both', 'horizontal', 'vertical'; optional): Controls `resize` CSS property, `'none'` by default. - rightSection (a list of or a singular dash component, string or number; optional): Content section rendered on the right side of the input. - rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'auto', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `rightSection` element, `'none'` by default. - rightSectionProps (dict; optional): Props passed down to the `rightSection` element. - rightSectionWidth (string | number; optional): Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height. - size (optional): Controls input `height` and horizontal `padding`, `'sm'` by default. - spellCheck (boolean; optional): Spell check property. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; default ''): Content. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withAsterisk (boolean; optional): Determines whether the required asterisk should be displayed. Overrides `required` prop. Does not add required attribute to the input. `False` by default. - withErrorStyles (boolean; optional): Determines whether the input should have red border and red text color when the `error` prop is set, `True` by default. - wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the root element. ## AppShell Responsive shell for your application with header, navbar, aside and footer. Category: Layout ### Examples Since `AppShell` components have fixed position, it is not possible to include live demos on this page. Please see the code in the [dmc-docs GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell). The Appshell example apps are deployed on [Plotly Cloud](https://plotly.com/cloud/). 1 Basic AppShell with Header and Navbar - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/basic_appshell.py) - [Live Demo on Plotly Cloud](https://dmc-appshell-basic.plotly.app/) ```python """ Basic Appshell with header and navbar that collapses on mobile. """ import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False), dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ], h="100%", px="md", ) ), dmc.AppShellNavbar( id="navbar", children=[ "Navbar", *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)], ], p="md", ), dmc.AppShellMain("Main"), ], header={"height": 60}, padding="md", navbar={ "width": 300, "breakpoint": "sm", "collapsed": {"mobile": True}, }, id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def navbar_is_open(opened, navbar): navbar["collapsed"] = {"mobile": not opened} return navbar if __name__ == "__main__": app.run(debug=True) ``` 2 Responsive Width and Height - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/responsive_sizes.py) - [Live Demo on Plotly Cloud](https://dmc-appshell-responsive-sizes.plotly.app/) ```python """ Responsive width and height App shell with responsive navbar width and height """ import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Burger( id="burger", size="sm", hiddenFrom="sm", opened=False, ), dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ], h="100%", px="md", ) ), dmc.AppShellNavbar( id="navbar", children=[ "Navbar", *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)], ], p="md", ), dmc.AppShellMain("Main"), ], header={ "height": {"base": 60, "md": 70, "lg": 80}, }, navbar={ "width": {"base": 200, "md": 300, "lg": 400}, "breakpoint": "sm", "collapsed": {"mobile": True}, }, padding="md", id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def toggle_navbar(opened, navbar): navbar["collapsed"] = {"mobile": not opened} return navbar if __name__ == "__main__": app.run(debug=True) ``` 3 Mobile-Only Navbar - Buttons in the header are displayed in the navbar on mobile. - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/mobile_navbar.py) - [Live Demo on Plotly Cloud](https://dmc-appshell-mobile-navbar.plotly.app/) ```python """ Mobile only navbar Navbar is only visible on mobile, links that are rendered in the header on desktop are hidden on mobile in header and rendered in navbar instead. """ import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" buttons = [ dmc.Button("Home", variant="subtle", color="gray"), dmc.Button("Blog", variant="subtle", color="gray"), dmc.Button("Contacts", variant="subtle", color="gray"), dmc.Button("Support", variant="subtle", color="gray"), ] layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Group( [ dmc.Burger( id="burger", size="sm", hiddenFrom="sm", opened=False, ), dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ] ), dmc.Group( children=buttons, ml="xl", gap=0, visibleFrom="sm", ), ], justify="space-between", style={"flex": 1}, h="100%", px="md", ), ), dmc.AppShellNavbar( id="navbar", children=buttons, py="md", px=4, ), dmc.AppShellMain( "Navbar is only visible on mobile, links that are rendered in the header on desktop are hidden on mobile in header and rendered in navbar instead." ), ], header={"height": 60}, navbar={ "width": 300, "breakpoint": "sm", "collapsed": {"desktop": True, "mobile": True}, }, padding="md", id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def toggle_navbar(opened, navbar): navbar["collapsed"] = {"mobile": not opened, "desktop": True} return navbar if __name__ == "__main__": app.run(debug=True) ``` 4 Collapsible Navbar on Desktop and Mobile - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/responsive_sizes.py) - [Live Demo on Plotly Cloud](https://dmc-appshell-responsive-sizes.plotly.app/) ```python """ Responsive width and height App shell with responsive navbar width and height """ import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Burger( id="burger", size="sm", hiddenFrom="sm", opened=False, ), dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ], h="100%", px="md", ) ), dmc.AppShellNavbar( id="navbar", children=[ "Navbar", *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)], ], p="md", ), dmc.AppShellMain("Main"), ], header={ "height": {"base": 60, "md": 70, "lg": 80}, }, navbar={ "width": {"base": 200, "md": 300, "lg": 400}, "breakpoint": "sm", "collapsed": {"mobile": True}, }, padding="md", id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def toggle_navbar(opened, navbar): navbar["collapsed"] = {"mobile": not opened} return navbar if __name__ == "__main__": app.run(debug=True) ``` 5 Full AppShell Layout - Includes all elements: navbar, header, aside, and footer. - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/full_layout.py) - [Live Demo on Plotly Cloud](https://dmc-appshell-full-layout.plotly.app/) ```python """ AppShell with all elements Navbar, header, aside and footer used together """ import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Burger( id="burger", size="sm", hiddenFrom="sm", opened=False, ), dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ], h="100%", px="md", ) ), dmc.AppShellNavbar( id="navbar", children=[ "Navbar", *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)], ], p="md", ), dmc.AppShellMain( "Aside is hidden on md breakpoint and cannot be opened when it is collapsed" ), dmc.AppShellAside("Aside", p="md"), dmc.AppShellFooter("Footer", p="md"), ], header={"height": 60}, footer={"height": 60}, navbar={ "width": 300, "breakpoint": "sm", "collapsed": {"mobile": True}, }, aside={ "width": 300, "breakpoint": "md", "collapsed": {"desktop": False, "mobile": True}, }, padding="md", id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def toggle_navbar(opened, navbar): navbar["collapsed"] = {"mobile": not opened} return navbar if __name__ == "__main__": app.run(debug=True) ``` 6 Scrollable Navbar with 60 Links - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/navbar_scroll.py) - [Live Demo on Plotly CLoud](https://dmc-appshell-navbar-scroll.plotly.app/) ```python """ Scrollable Navbar with 60 links """ import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False), dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ], h="100%", px="md", ) ), dmc.AppShellNavbar( id="navbar", children=dmc.ScrollArea( [ "60 links in a scrollable section", *[ dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(60) ], ] ), p="md", ), dmc.AppShellMain("Main"), ], header={"height": 60}, padding="md", navbar={ "width": 300, "breakpoint": "sm", "collapsed": {"mobile": True}, }, id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def navbar_is_open(opened, navbar): navbar["collapsed"] = {"mobile": not opened} return navbar if __name__ == "__main__": app.run(debug=True) ``` 7 Alternate AppShell Layout - Navbar and aside are rendered on top of the header and footer. - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/alt_layout.py) - [Live Demo on Plotly Cloud](https://dmc-appshell-alt-layout.plotly.app/) ```python """ Alt Layout Navbar and Aside are rendered on top on Header and Footer """ import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False), dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ], h="100%", px="md", ) ), dmc.AppShellNavbar( p="md", children=[ dmc.Group( [ dmc.Burger( id="navbar-burger", size="sm", hiddenFrom="sm", opened=False ), dmc.Text("Navbar"), ] ), *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)], ], ), dmc.AppShellMain( "Alt layout – Navbar and Aside are rendered on top of Header and Footer" ), dmc.AppShellAside("Aside", p="md"), dmc.AppShellFooter("Footer", p="md"), ], layout="alt", header={"height": 60}, footer={"height": 60}, navbar={ "width": 300, "breakpoint": "sm", "collapsed": {"mobile": True}, }, aside={ "width": 300, "breakpoint": "md", "collapsed": {"desktop": False, "mobile": True}, }, padding="md", id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def toggle_navbar(opened, navbar): navbar["collapsed"] = {"mobile": not opened} return navbar if __name__ == "__main__": app.run(debug=True) ``` 8 AppShell with Theme Switch Component - [View Code on GitHub](https://github.com/snehilvj/dmc-docs/tree/main/help_center/appshell/appshell_with_theme_switch.py) - [Live Demo on Plotly Cloud](https://dmc-appshell-with-theme-switch.plotly.app/) ```python """ Basic Appshell with header and navbar that collapses on mobile. Also includes a theme switch. """ import dash_mantine_components as dmc from dash_iconify import DashIconify from dash import Dash, Input, Output, State, callback, clientside_callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" theme_toggle = dmc.Switch( offLabel=DashIconify( icon="radix-icons:sun", width=15, color= "var(--mantine-color-yellow-8)" ), onLabel=DashIconify( icon="radix-icons:moon", width=15, color= "var(--mantine-color-yellow-6)", ), id="color-scheme-toggle", persistence=True, color="grey", ) layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Group( [ dmc.Burger( id="burger", size="sm", hiddenFrom="sm", opened=False, ), dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ] ), theme_toggle, ], justify="space-between", style={"flex": 1}, h="100%", px="md", ), ), dmc.AppShellNavbar( id="navbar", children=[ "Navbar", *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)], ], p="md", ), dmc.AppShellMain("Main"), ], header={"height": 60}, padding="md", navbar={ "width": 300, "breakpoint": "sm", "collapsed": {"mobile": True}, }, id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def navbar_is_open(opened, navbar): navbar["collapsed"] = {"mobile": not opened} return navbar clientside_callback( """ (switchOn) => { document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light'); return window.dash_clientside.no_update } """, Output("color-scheme-toggle", "id"), Input("color-scheme-toggle", "checked"), ) if __name__ == "__main__": app.run(debug=True) ``` ### Basic usage AppShell is a layout component. It can be used to implement a common Header - Navbar - Footer - Aside layout pattern. All AppShell components have `position: fixed` style - they are not scrolled with the page. The documentation app that you are viewing uses AppShell with Header, Aside, and Navbar. This is the code for the first example above for the basic app shell with header and navbar. The navbar collapses on mobile. ```python import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback app = Dash() logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" layout = dmc.AppShell( [ dmc.AppShellHeader( dmc.Group( [ dmc.Burger(id="burger", size="sm", hiddenFrom="sm", opened=False), dmc.Image(src=logo, h=40), dmc.Title("Demo App", c="blue"), ], h="100%", px="md", ) ), dmc.AppShellNavbar( id="navbar", children=[ "Navbar", *[dmc.Skeleton(height=28, mt="sm", animate=False) for _ in range(15)], ], p="md", ), dmc.AppShellMain("Main"), ], header={"height": 60}, padding="md", navbar={ "width": 300, "breakpoint": "sm", "collapsed": {"mobile": True}, }, id="appshell", ) app.layout = dmc.MantineProvider(layout) @callback( Output("appshell", "navbar"), Input("burger", "opened"), State("appshell", "navbar"), ) def navbar_is_open(opened, navbar): navbar["collapsed"] = {"mobile": not opened} return navbar if __name__ == "__main__": app.run(debug=True) ``` ### AppShell components * `AppShell` - root component, it is required to wrap all other components, used to configure layout properties * `AppShellHeader` - section rendered at the top of the page * `AppShellNavbar` - section rendered on the left side of the page * `AppShellAside` - section rendered on the right side of the page * `AppShellFooter` - section rendered at the bottom of the page * `AppShellMain` - main section rendered at the center of the page, has static position, all other sections are offset by its padding * `AppShellSection` - utility component that can be used to render group of content inside `AppShellNavbar` and `AppShellAside` ### AppShell Configuration `AppShell` component accepts, `header`, `footer`, `navbar` and `aside` props to configure corresponding sections. It is required to set these props if you want to use corresponding components. For example, if you want to use `AppShellHeader` component, you need to set `header` prop on the `AppShell` component. ### header and footer properties `header` and `footer` configuration dictionaries are the same and have the following properties: - `height`: Height of the section: number, string or dict with breakpoints as keys and height as value - `collapsed`: boolean; If section is collapsed it is hidden from the viewport and is not offset in `AppShellMain` - `offset`: boolean; Determines whether the section should be offset by the `AppShellMain`. For example, it is useful if you want to hide header based on the scroll position. ### navbar and aside properties `navbar` and `aside` configuration dictionaries are the same as well and have the following properties: - `width`: Width of the section: number, string or dict with breakpoints as keys and width as value - `breakpoint`: Breakpoint at which section should switch to mobile mode. In mobile mode the section always has 100% width and its collapsed state is controlled by the `collapsed.mobile` instead of `collapsed.desktop` - `collapsed`: Determines whether the section should be collapsed. Example: {"desktop": False; "mobile": True }; ### layout prop `layout` prop controls how `AppShellHeader` / `AppShellFooter` and `AppShellNavbar` / `AppShellAside` are positioned relative to each other. It accepts `alt` and `default` values: - `alt` – `AppShellNavbar`/`AppShellAside` height is equal to viewport height, `AppShellHeader`/`AppShellFooter` width is equal to viewport width less the `AppShellNavbar` and `AppShellAside` width. See example #7 above. - `default` – `AppShellNavbar`/`AppShellAside` height is equal to viewport height - `AppShellHeader`/ `AppShellFooter` height, `AppShellHeader`/`AppShellFooter` width is equal to viewport width ### height prop `height` property in `header` and `footer` configuration dicts works the following way: - If you pass a number, the value will be converted to rem and used as height at all viewport sizes. - To change height based on viewport width, use dict with breakpoints as keys and height as values. It works the same way as `style` props. Examples: ```python # Height is a number, it will be converted to rem and used as height at all viewport sizes dmc.AppShell( children=[ dmc.AppShellHeader("Header") # ... ], header={"height": 48} ) ``` ```python # Height is an dict with breakpoints: # - height is 48 when viewport width is < theme.breakpoints.sm # - height is 60 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg # - height is 76 when viewport width is >= theme.breakpoints.lg dmc.AppShell( children=[ dmc.AppShellHeader("Header") ], header={"height": {"base": 48, "sm": 60, "lg": 76}} ) ``` ### Width configuration `width` property in `navbar` and `aside` configuration dictionaries works the following way: - If you pass a number, the value will be converted to rem and used as width when the viewport is larger than breakpoint. - To change `width` based on viewport width, use dict with breakpoints as keys and width as values. It works the same way as `style` props. Note that width is always 100% when the viewport is smaller than breakpoint. Examples ```python # Width is a number, it will be converted to rem and used as width when viewport is larger than theme.breakpoints.sm dmc.AppShell( children=[ dmc.AppShellNavbar("Navbar") # ... ], navbar={"width": 48, "breakpoint": "sm"} ) ``` ```python # Width is an object with breakpoints: # - width is 100% when viewport width is < theme.breakpoints.sm # - width is 200 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg # - width is 300 when viewport width is >= theme.breakpoints.lg dmc.AppShell( children=[ dmc.AppShellNavbar("Navbar") # ... ], navbar={"width": {"sm": 200, "lg": 300 }, "breakpoint": 'sm' } ) ``` ### padding prop `padding` prop controls the padding of the `AppShellMain` component. It is important to use it instead of setting padding on the `AppShellMain` directly because padding of the `AppShellMain` is also used to offset `AppShellHeader`, `AppShellNavbar`, `AppShellAside` and `AppShellFooter` components. `padding` prop works the same way as `style` props and accepts numbers, strings and dicts with breakpoints as keys and padding as values. You can reference theme.spacing values or use any valid CSS values. ```python # Padding is always theme.spacing.md dmc.AppShell( # content padding="md" ) ``` ```python # Padding is: # - 10 when viewport width is < theme.breakpoints.sm # - 15 when viewport width is >= theme.breakpoints.sm and < theme.breakpoints.lg # - theme.spacing.xl when viewport width is >= theme.breakpoints.lg dmc.AppShell( # content padding={"base": 10, "sm": 15, "lg": "xl" } ) ``` ### Collapsed navbar/aside configuration `navbar` and `aside` props have `collapsed` property. The property accepts an dict { mobile: boolean; desktop: boolean } which allows to configure collapsed state depending on the viewport width. See example #4 above: Collapsible Navbar on Desktop and Mobile ### withBorder prop `withBorder` prop is available on `AppShell` and associated sections: `AppShellHeader`, `AppShellNavbar`, `AppShellAside` and `AppShellFooter`. By default, `withBorder` prop is True – all components have a border on the side that is adjacent to the `AppShellMain` component. For example, `AppShellHeader` is located at the top of the page – it has a border on the bottom side, `AppShellNavbar` is located on the left side of the page – it has a border on the right side. To remove the border from all components, set `withBorder=False` on the `AppShell`: ```python dmc.AppShell(withBorder=False) ``` To remove the border from a specific component, set `withBorder=False` on that component: ```python dmc.AppShell( children=[ dmc.AppShellHeader(withBorder=False) ] ) ``` ### zIndex prop `zIndex` prop is available on AppShell and associated sections: `AppShellHeader`, `AppShellNavbar`, `AppShellAside` and `AppShellFooter`. By default, all sections z-index is 200. To change z-index of all sections, set `zIndex` prop on the AppShell: ```python import dash_mantine_components as dmc dmc.AppShell( zIndex=100, children=[ # content ] ) ``` To change z-index of individual sections, set `zIndex` prop on each of them: ```python import dash_mantine_components as dmc dmc.AppShell( children=[ dmc.AppShellHeader("Header", zIndex=2000), dmc.AppShellNavbar("Navbar", zIndex=2000), ] ) ``` ### Control transitions Set `transitionDuration` and `transitionTimingFunction` props on the `AppShell` to control transitions: ```python dmc.AppShell( transitionDuration=500, transitionTimingFunction="ease" , ) ``` ### disabled prop Set `disabled` prop on the `AppShell` to prevent all sections except `AppShellMain` from rendering. It is useful when you want to hide the shell on some pages of your application. ```python dmc.AppShell(disabled=True) ``` ### Usage in docs ```python import dash_mantine_components as dmc dmc.AppShell( [ dmc.AppShellHeader("Header", px=25), dmc.AppShellNavbar("Navbar"), dmc.AppShellAside("Aside", withBorder=False), dmc.AppShellMain(children=[...]), ], header={"height": 70}, padding="xl", navbar={ "width": 300, "breakpoint": "sm", "collapsed": {"mobile": True}, }, aside={ "width": 300, "breakpoint": "xl", "collapsed": {"desktop": False, "mobile": True}, }, ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### AppShell Selectors | Selector | Static selector | Description | |----------|-----------------------------|-----------------------------------| | root | .mantine-AppShell-root | Root element (AppShell component) | | navbar | .mantine-AppShell-navbar | AppShell.Navbar root element | | header | .mantine-AppShell-header | AppShell.Header root element | | main | .mantine-AppShell-main | AppShell.Main root element | | aside | .mantine-AppShell-aside | AppShell.Aside root element | | footer | .mantine-AppShell-footer | AppShell.Footer root element | | section | .mantine-AppShell-section | AppShell.Section root element | #### AppShell CSS Variables | Selector | Variable | Description | |----------|------------------------------------------|-----------------------------------------------| | root | --app-shell-transition-duration | Controls transition duration of all children | | | --app-shell-transition-timing-function | Controls transition timing function of all children | #### AppShell Data Attributes | Selector | Attribute | Condition | Value | |------------------|-------------------|------------------------------|--------------------------------------| | root | data-resizing | User is resizing the window | – | | root | data-layout | – | Value of the `layout` prop | | root | data-disabled | `disabled` prop is set | – | | navbar, header, aside, footer | data-with-border | `withBorder` prop is set either on the AppShell or on the associated component | – | | section | data-grow | `grow` prop is set on the AppShell.Section | – | ### Keyword Arguments ### AppShell - children (a list of or a singular dash component, string or number; required): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - aside (dict; optional): AppShell.Aside configuration, controls width, breakpoints and collapsed state. Required if you use AppShell.Aside component. `aside` is a dict with keys: - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): If set, Navbar, Aside, Header and Footer components be hidden. - footer (dict; optional): AppShell.Footer configuration, controls height, offset and collapsed state. Required if you use AppShell.Footer component. `footer` is a dict with keys: - header (dict; optional): AppShell.Header configuration, controls height, offset and collapsed state. Required if you use AppShell.Header component. `header` is a dict with keys: - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - layout (a value equal to: 'default', 'alt'; optional): Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - mode (a value equal to: 'fixed', 'static'; optional): Determines positioning mode of all sections default 'fixed'. - navbar (dict; optional): AppShell.Navbar configuration, controls width, breakpoints and collapsed state. Required if you use AppShell.Navbar component. `navbar` is a dict with keys: - offsetScrollbars (boolean; optional): Determines whether Header and Footer components should include styles to offset scrollbars. Based on `react-remove-scroll`. `True` by default. - padding (number; optional): Controls padding of the main section, `0` by default. !important!: use `padding` prop instead of `p`. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - transitionDuration (number; optional): Duration of all transitions in ms, `200` by default. - transitionTimingFunction (optional): Timing function of all transitions, `ease` by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBorder (boolean; optional): Determines whether associated components should have a border, `True` by default. - zIndex (string | number; optional): `z-index` of all associated elements, `200` by default. #### Navbar - children (a list of or a singular dash component, string or number; required): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBorder (boolean; optional): Determines whether component should have a border, overrides `withBorder` prop on `AppShell` component. - zIndex (string | number; optional): Component `z-index`, by default inherited from the `AppShell`. #### Header - children (a list of or a singular dash component, string or number; required): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBorder (boolean; optional): Determines whether component should have a border, overrides `withBorder` prop on `AppShell` component. - zIndex (string | number; optional): Component `z-index`, by default inherited from the `AppShell`. #### Aside - children (a list of or a singular dash component, string or number; required): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBorder (boolean; optional): Determines whether component should have a border, overrides `withBorder` prop on `AppShell` component. - zIndex (string | number; optional): Component `z-index`, by default inherited from the `AppShell`. #### Footer - children (a list of or a singular dash component, string or number; required): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBorder (boolean; optional): Determines whether component should have a border, overrides `withBorder` prop on `AppShell` component. - zIndex (string | number; optional): Component `z-index`, by default inherited from the `AppShell`. #### Section - children (a list of or a singular dash component, string or number; required): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - grow (boolean; optional): Determines whether the section should take all available space, `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## AspectRatio Use the Aspect component to maintain responsive consistent width/height ratio. Category: Layout ### Image ```python import dash_mantine_components as dmc component = dmc.AspectRatio( dmc.Image( src="https://www.nasa.gov/wp-content/uploads/2022/07/web_first_images_release.png", alt="Carina Nebula", ), ratio=4/3, ) ``` ### Map embed ```python import dash_mantine_components as dmc from dash import html component = dmc.AspectRatio( html.Iframe( src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.3063874233135!2d-74.04668908358428!3d40.68924937933441!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue%20of%20Liberty%20National%20Monument!5e0!3m2!1sen!2sru!4v1644262070010!5m2!1sen!2sru", title="Google map", ), ratio=16 / 9, ) ``` ### Video embed ```python import dash_mantine_components as dmc from dash import html component = dmc.AspectRatio( html.Iframe( src="https://www.youtube.com/embed/KsTKREWoVC4", title="YouTube video player", allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen", ), ratio=16 / 9, ) ``` ### Inside flex container By default, `AspectRatio` does not have fixed width and height, it will take as much space as possible in a regular container. To make it work inside flex container, you need to set `width` or `flex` property. ```python import dash_mantine_components as dmc from dash import html component = html.Div( dmc.AspectRatio( ratio=1, style={"flex": "0 0 100px"}, children=[ dmc.Image( src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-6.png", alt="Avatar", ) ], ), style={"display": "flex"}, ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### AspectRatio Selectors | Selector | Static selector | Description | |----------|----------------------------------|---------------| | root | .mantine-AspectRatio-root | Root element | --- #### AspectRatio CSS Variables | Selector | Variable | Description | |----------|---------------|-----------------| | root | --ar-ratio | Aspect ratio | ### Keyword Arguments #### AspectRatio - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - ratio (number; optional): Aspect ratio, e.g. `16 / 9`, `4 / 3`, `1920 / 1080`, `1` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Center Use Center component to center content vertically and horizontally. Category: Layout ### Simple Example ```python import dash_mantine_components as dmc component = dmc.Center( style={"height": 200, "width": "100%"}, children=[ dmc.Badge("Free", style={"marginRight": 5}), dmc.Anchor("Click now!", href="https://mantine.dev/"), ], ) ``` ### Inline To use `Center` with inline elements set `inline` prop. For example, you can center link icon and label: ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Box( dmc.Anchor( href="https://mantine.dev", target="_blank", children=dmc.Center( [ DashIconify( icon="tabler:arrow-left", # Use the Tabler Arrow Left icon width=12, height=12, ), dmc.Box("Back to Mantine website", ml=5), ], inline=True, ), ) ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |------|--------------------|--------------| | root | .mantine-Card-root | Root element | ### Keyword Arguments #### Center - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inline (boolean; optional): Determines whether `inline-flex` should be used instead of `flex`, `False` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Container Container is the most basic layout element, it centers content horizontally and adds horizontal padding from theme. Category: Layout ### Simple Example Container is the most basic layout element, it centers content horizontally and adds horizontal padding from Mantine's theme. Component accepts these props: * `size` – controls default max width * `fluid` – overwrites size prop and sets max width to 100% ```python import dash_mantine_components as dmc from dash import html style = { "height": 100, "border": "1px solid var(--mantine-color-blue-outline)", "marginTop": 20, "marginBottom": 20, } component = html.Div( children=[ dmc.Container("Default container", style=style), dmc.Container( "xs container with xs horizontal padding", size="xs", px="xs", style=style ), dmc.Container( "200px container with 0px horizontal padding", size=200, px=0, style=style ), ] ) ``` ### Fluid Set `fluid` prop to make container fluid, it will take 100% of available width, it is the same as setting `size="100%"`. ```python import dash_mantine_components as dmc from dash import html component = dmc.Container( "Fluid container has 100% max-width", fluid=True, h=50, bg="var(--mantine-color-blue-light)" ) ``` ### Grid strategy Starting from 2.2.0, `Container` 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", ) ``` **Note — Adding custom HTML attributes to Dash components:** * For `dash-html-components`, you can add custom attributes using Python’s `**` unpacking syntax: ```python html.Div(**{"data-breakout": ""}) ``` * For DMC components that support the [Styles API](/styles-api), use the `attributes` prop to pass attributes to elements of the component: ```python dmc.Paper(attributes={"root": "data-breakout"}) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Container Selectors | Selector | Static selector | Description | |----------|-----------------------------|---------------| | root | .mantine-Container-root | Root element | #### Container CSS Variables | Selector | Variable | Description | |----------|-------------------|---------------------------| | root | --container-size | Controls container max-width | ### Keyword Arguments #### Container - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - fluid (boolean; optional): Determines whether the container should take 100% of its parent width. If set, `size` prop is ignored. `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - size (number; optional): Sets `max-width` of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when `fluid` prop is set. `'md'` by default. - strategy (a value equal to: 'block', 'grid'; optional): Centering strategy. Default value: 'block'. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Flex Use the Flex component to compose elements in a flex container. Category: Layout ### Introduction ### Supported Props | Prop | CSS Property | Theme Key | |-------------|------------------|-----------------| | gap | gap | theme.spacing | | rowGap | rowGap | theme.spacing | | columnGap | columnGap | theme.spacing | | align | alignItems | – | | justify | justifyContent | – | | wrap | flexWrap | – | | direction | flexDirection | – | ### Responsive Props Flex component props can have responsive values the same way as other style props: ```python import dash_mantine_components as dmc component = dmc.Flex( [ dmc.Button("Button 1"), dmc.Button("Button 2"), dmc.Button("Button 3"), ], direction={"base": "column", "sm": "row"}, gap={"base": "sm", "sm": "lg"}, justify={"sm": "center"}, ) ``` ### Comparison: Group, Stack, and Flex `Flex` component is an alternative to `Group` and `Stack`. `Flex` is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration. | Feature | Group | Stack | Flex | |----------------------------|-------|-------|------| | Direction | horizontal | vertical | both | | Equal width children | ✅ | ❌ | ❌ | | flex-wrap support | ✅ | ❌ | ✅ | | Responsive flexbox props | ❌ | ❌ | ✅ | ### Browser support `Flex` uses flexbox gap to add spacing between children. In older browsers, `Flex` children may not have spacing. ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:-----|:-------------------|:-------------| | root | .mantine-Flex-root | Root element | ### Keyword Arguments #### Flex - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - align (dict; optional): `align-items` CSS property. Supports dict for responsive values. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - columnGap (string | number | dict; optional): theme.spacing key, `column-gap` CSS property, or dict for responsive values. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - direction (dict; optional): `flex-direction` CSS property. Supports dict for responsive values. - gap (string | number | dict; optional): theme.spacing key, `gap` CSS property, or dict for responsive values. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - justify (dict; optional): `justify-content` CSS property. Supports dict for responsive values. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - rowGap (string | number | dict; optional): theme.spacing key, `row-gap` CSS property, or dict for responsive values. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - wrap (dict; optional): `flex-wrap` CSS property. Supports dict for responsive values. ## Grid Responsive 12 columns grid system Category: Layout ### Usage Use Grid component to create layouts with a flexbox grid system. ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("1", style=style), span=6), dmc.GridCol(dmc.Box("2", style=style), span=3), dmc.GridCol(dmc.Box("3", style=style), span=3), ], gutter="xl", ) ``` ### Columns span `The GridCol` `span` prop controls the ratio of column width to the total width of the row. By default, grid uses 12 columns layout, so `span` prop can be any number from 1 to 12. Examples: ```python dmc.GridCol(span=3) # 3 / 12 = 25% of row width dmc.GridCol(span=4) # 4 / 12 = 33% of row width dmc.GridCol(span=6) # 6 / 12 = 50% of row width dmc.GridCol(span=12) # 12 / 12 = 100% of row width ``` `span` prop also supports dictionary syntax to change column width based on viewport width, it accepts `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12. The syntax is the same as in `style` props. In the following example `span={'base': 12, 'md': 6, 'lg': 3`}: - `base` – 12 / 12 = 100% of row width when viewport width is less than `md` breakpoint - `md` – 6 / 12 = 50% of row width when viewport width is between md and `lg` breakpoints - `lg` – 3 / 12 = 25% of row width when viewport width is greater than `lg` breakpoint ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("1", style=style), span={"base": 12, "md": 6, "lg":3}), dmc.GridCol(dmc.Box("2", style=style), span={"base": 12, "md": 6, "lg":3}), dmc.GridCol(dmc.Box("3", style=style), span={"base": 12, "md": 6, "lg":3}), dmc.GridCol(dmc.Box("4", style=style), span={"base": 12, "md": 6, "lg":3}), ], ) ``` ### Gutter Set `gutter` prop to control spacing between columns. The prop works the same way as `style` props – you can reference theme.spacing values with `xs`, `sm`, `md`, `lg` and `xl` strings and use dictionary syntax to change gutter based on viewport width. You can also set gutter to a number to set spacing in px. ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("1", style=style), span=4), dmc.GridCol(dmc.Box("2", style=style), span=4), dmc.GridCol(dmc.Box("3", style=style), span=4), ], gutter={ "base": 5, "xs": "md", "md": "xl", "xl": 50 }, ) ``` ### Grow Set `grow` prop on Grid to force last row to take 100% of container width. ### Column Offset Set `offset` prop on `GridCol` component to add gaps to the grid. `offset` prop supports the same syntax as span prop: a number from 1 to 12 or a dictionary with `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12. ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("1", style=style), span=3), dmc.GridCol(dmc.Box("2", style=style), span=3), dmc.GridCol(dmc.Box("3", style=style), span=3, offset=3), ], gutter="xl", ) ``` ### Order Set the `order` prop on `GridCol` component to change the order of columns. `order` prop supports the same syntax as `span` prop: a number from 1 to 12 or a dictionary with `xs`, `sm`, `md`, `lg` and `xl` keys and values from 1 to 12. ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("2", style=style), span=3, order={"base": 2, "sm": 1, "lg": 3}), dmc.GridCol(dmc.Box("3", style=style), span=3, order={"base": 3, "sm": 2, "lg": 2}), dmc.GridCol(dmc.Box("1", style=style), span=3, order={"base": 1, "sm": 3, "lg": 1}), ], ) ``` ### Multiple rows Once children columns span and offset sum exceeds `columns` prop (defaults to 12), columns are placed on next row. ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("1", style=style), span=4), dmc.GridCol(dmc.Box("2", style=style), span=4), dmc.GridCol(dmc.Box("3", style=style), span=4), dmc.GridCol(dmc.Box("4", style=style), span=4), ], gutter="xl", ) ``` ### Justify and Align Since grid is a flexbox container, you can control justify-content and align-items properties by using `justify` and `align` props respectively. Note the minimum height set on column 2 and 3. ```python import dash_mantine_components as dmc dmc.Grid( children=[ dmc.GridCol(dmc.Box("1"), span=4), dmc.GridCol(dmc.Box("2", style={"minHeight":80}), span=4), dmc.GridCol(dmc.Box("3", style={"minHeight":120}), span=4), ], justify="center", align="stretch", ) ``` ### Auto Sized Columns All columns in a row with `span` or a `breakpoint` of `auto` will have equal size, growing as much as they can to fill the row. In this example, the second column takes up 50% of the row while the other two columns automatically resize to fill the remaining space. ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("span=auto", style=style), span="auto"), dmc.GridCol(dmc.Box("span=6", style=style), span=6), dmc.GridCol(dmc.Box("span=auto", style=style), span="auto"), ], gutter="xl", ) ``` ### Fit Content If you set `span` or a `breakpoint` to `content`, the column's size will automatically adjust to match the width of its content. ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("content width", style=style), span="content"), dmc.GridCol(dmc.Box("2", style=style), span=6), ], gutter="xl", ) ``` ### Change columns count By default, grids uses 12 columns layout, you can change it by setting `columns` prop on `Grid` component. Note that in this case, columns span and offset will be calculated relative to this value. In the following example, first column takes 50% with 12 span (12/24), second and third take 25% (6/24): ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Grid( children=[ dmc.GridCol(dmc.Box("1", style=style), span=12), dmc.GridCol(dmc.Box("2", style=style), span=6), dmc.GridCol(dmc.Box("3", style=style), span=6), ], columns=24 ) ``` ### Container queries To use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) instead of media queries, set `type='container'`. With container queries, all responsive values are adjusted based on the container width, not the viewport width. Note that, when using container queries, it is also required to set `breakpoints` prop to the exact container width values. To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right corner of the demo: ```python import dash_mantine_components as dmc style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.Box( # Wrapper div is added for demonstration purposes only, # it is not required in real projects dmc.Grid( children=[ dmc.GridCol(dmc.Box("1", style=style), span={"base": 12, "md": 6, "lg": 3}), dmc.GridCol(dmc.Box("2", style=style), span={"base": 12, "md": 6, "lg": 3}), dmc.GridCol(dmc.Box("3", style=style), span={"base": 12, "md": 6, "lg": 3}), dmc.GridCol(dmc.Box("4", style=style), span={"base": 12, "md": 6, "lg": 3}), ], gutter="xl", type="container", breakpoints={ "xs": "100px", "sm": "200px", "md": "300px", "lg": "400px", "xl": "500px", }, ), style={"resize": 'horizontal', "overflow": 'hidden', "maxWidth": '100%', "margin": 24 }, ) ``` ### overflow: hidden By default, `Grid` has `overflow: visible` style on the root element. In some cases you might want to change it to `overflow: hidden` to prevent negative margins from overflowing the grid container. For example, if you use `Grid` without parent container which has padding. ```python dmc.Grid([ dmc.GridCol("1", span=6), dmc.GridCol("2", span=6), ], overflow="hidden") ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Grid Selectors | Selector | Static selector | Description | |------------|-----------------------------|------------------------------------------| | container | .mantine-Grid-container | Container element, only used with `type="container"` prop | | root | .mantine-Grid-root | Root element | | inner | .mantine-Grid-inner | Columns wrapper | | col | .mantine-Grid-col | `Grid.Col` root element | --- #### Grid CSS Variables | Selector | Variable | Description | |----------|-------------------|----------------------------------| | root | --grid-overflow | Controls `overflow` property | | | --grid-align | Controls `align-items` property | | | --grid-justify | Controls `justify-content` property | ### Keyword Arguments #### Grid - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - align (optional): Sets `align-items`, `stretch` by default. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - breakpoints (dict; optional): Breakpoints values, only applicable when `type="container"` is set, ignored when `type` is not set or `type="media"` is set. `breakpoints` is a dict with keys: - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - columns (number; optional): Number of columns in each row, `12` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - grow (boolean; optional): Determines whether columns in the last row should expand to fill all available space, `False` by default. - gutter (number; optional): Gutter between columns, key of `theme.spacing` or any valid CSS value, `'md'` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - justify (optional): Sets `justify-content`, `flex-start` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - overflow (optional): Sets `overflow` CSS property on the root element, `'visible'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - type (a value equal to: 'media', 'container'; optional): Determines typeof of queries that are used for responsive styles, `'media'` by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### GridCol - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - offset (number; optional): Column offset on the left side – number of columns that should be left empty before this column. - order (number; optional): Column order, can be used to reorder columns at different viewport sizes. - span (number; optional): Column span, `12` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Group Use Group component to place components in a horizontal flex container. Category: Layout ### Usage ### Align Since `Group` is a flexbox container, you can control `justify-content` and `align-items` properties by using `justify` and `align` props respectively. Note the minimum height set on component 2 and 3 in the example above. ```python style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", "margin": 2, "width": 100 } target = dmc.Grid( children=[ dmc.Box("1", style=style), dmc.Box("2", style={**style, "minHeight": 80}), dmc.Box("3", style={**style, "minHeight": 120}), ], ) ``` ### preventGrowOverflow `preventGrowOverflow` prop allows you to control how `Group` children should behave when there is not enough space to fit them all on one line. By default, children are not allowed to take more space than (1 / children.length) * 100% of parent width (`preventGrowOverflow` is set to True). To change this behavior, set `preventGrowOverflow` to False and children will be allowed to grow and take as much space as they need. ```python import dash_mantine_components as dmc component = dmc.Box( style={"overflow": "hidden"}, children=[ dmc.Box( maw=500, p="md", mx="auto", bg="var(--mantine-color-blue-light)", children=[ dmc.Text( size="sm", mb=5, children=( "preventGrowOverflow: true – each child width is always limited " "to 33% of parent width (since there are 3 children)" ), ), dmc.Group( grow=True, wrap="nowrap", children=[ dmc.Button("First button", variant="default"), dmc.Button("Second button with large content", variant="default"), dmc.Button("Third button", variant="default"), ], ), dmc.Text( size="sm", mb=5, mt="md", children=( "preventGrowOverflow: false – children will grow based on their " "content, they can take more than 33% of parent width" ), ), dmc.Group( grow=True, preventGrowOverflow=False, wrap="nowrap", children=[ dmc.Button("First button", variant="default"), dmc.Button("Second button with large content", variant="default"), dmc.Button("Third button", variant="default"), ], ), ], ) ], ) ``` ### Group children `Group` works correctly only with components. Strings, or numbers may have incorrect styles if `grow` prop is set: ```python # don't do this dmc.Group([ "Some text", dmc.Text("Some more text"), 20, ], grow=True) ``` ### Browser support `Group` uses flexbox `gap` to add spacing between children. In older browsers, `Group` children may not have spacing. ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Group Selectors | Selector | Static selector | Description | |----------|-------------------------|----------------| | root | .mantine-Group-root | Root element | #### Group CSS Variables | Selector | Variable | Description | |----------|--------------------------|--------------------------------------------------------------| | root | --group-align | Controls `align-items` property | | | --group-justify | Controls `justify-content` property | | | --group-gap | Controls `gap` property | | | --group-wrap | Controls `flex-wrap` property | | | --group-child-width | Controls max-width of child elements when `grow` and `preventGrowOverflow` are set | #### Group Data Attributes | Selector | Attribute | Condition | |----------|-------------|-----------------| | root | data-grow | `grow` prop is set | ### Keyword Arguments #### Group - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - align (optional): Controls `align-items` CSS property, `'center'` by default. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - gap (string | number; optional): Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem, `'md'` by default. - grow (boolean; optional): Determines whether each child element should have `flex-grow: 1` style, `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - justify (optional): Controls `justify-content` CSS property, `'flex-start'` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - preventGrowOverflow (boolean; optional): Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children), `True` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - wrap (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'nowrap', 'wrap', 'wrap-reverse'; optional): Controls `flex-wrap` CSS property, `'wrap'` by default. ## Layout Overview This guide gives an overview of layout components available in Dash Mantine components. Category: Layout ### SimpleGrid Use [SimpleGrid](/components/simplegrid) if you need columns with equal size. The `cols`, `spacing` and `verticalSpacing` props accepts dictionaries to set responsive values based on viewport width. ### Grid Use [Grid](/components/grid) if you need columns with different sizes. You can also set spans, spacing, offsets, and ordering and more. ### Group Use [Group](/components/group) if you want to put items next to each other horizontally. ### Stack Use [Stack](/components/stack) if you want to put items next to each other vertically ### Flex Use [Flex](/components/flex) if you want to create both horizontal and vertical flexbox layouts. It's more flexible than `Group` and `Stack` but requires more configuration. ### AspectRatio Use [AspectRatio](/components/aspectratio) to ensure that content always maintains a specific width-to-height ratio, no matter the screen size. Great for images and videos. ### Center Use [Center](/components/center) component to center content vertically and horizontally. This example centers an icon with a link with the `inline` prop: ### Container Use [Container](/components/container) to center content horizontally and add horizontal padding from theme. Good for limiting width and centering content on large screens. ### Box [Box](/components/box) is like an `html.Div` but also includes Mantine style props. ### Paper Use [Paper](/components/paper) to group content visually like a card. It includes props for background, padding, shadow, borders, and rounded corners. ### AppShell The [AppShell](/components/appshell) component is a layout component designed to create responsive and consistent app layouts. It includes: - `AppShell` - root component, it is required to wrap all other components, used to configure layout properties - `AppShellHeader` - section rendered at the top of the page - `AppShellNavbar` - section rendered on the left side of the page - `AppShellAside` - section rendered on the right side of the page - `AppShellFooter` - section rendered at the bottom of the page - `AppShellMain` - main section rendered at the center of the page, has static position, all other sections are offset by its padding - `AppShellSection` - utility component that can be used to render group of content inside `AppShellNavbar` and `AppShellAside` This DMC documentation app is built using `AppShell` components. See the [AppShell](/components/appshell) docs for more info and examples: ## SimpleGrid Use SimpleGrid component to create a grid where each column takes equal width. You can use it to create responsive layouts. Category: Layout ### Usage `SimpleGrid` is a responsive grid system with equal-width columns. It uses CSS grid layout. If you need to set different widths for columns, use `Grid` component instead. ### spacing and verticalSpacing props `spacing` prop is used both for horizontal and vertical spacing if `verticalSpacing` is not set: ```python # `spacing` is used for both horizontal and vertical spacing dmc.SimpleGrid(spacing="xl") # `spacing` is used for horizontal spacing, `verticalSpacing` for vertical dmc.SimpleGrid(spacing="xl", verticalSpacing="lg") ``` ### Responsive Props `cols`, `spacing` and `verticalSpacing` props support object notation for responsive values, it works the same way as [style props](/style-props): the object may have `base`, `xs`, `sm`, `md`, `lg` and `xl` key, and values from those keys will be applied according to current viewport width. `cols` prop can be understood from the below example as: - 1 column if viewport width is less than `sm` breakpoint - 2 columns if viewport width is between `sm` and `lg` breakpoints - 5 columns if viewport width is greater than `lg` breakpoint Same logic applies to `spacing` and `verticalSpacing` props. Resize browser to see breakpoints behavior. ```python import dash_mantine_components as dmc from dash import html style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = dmc.SimpleGrid( cols={"base": 1, "sm": 2, "lg": 5}, spacing={"base": 10, "sm": "xl"}, verticalSpacing={"base": "md", "sm": "xl"}, children=[ html.Div("1", style=style), html.Div("2", style=style), html.Div("3", style=style), html.Div("4", style=style), html.Div("5", style=style), ], ) ``` ### Container queries To use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) instead of media queries, set `type='container'`. With container queries, grid columns and spacing will be adjusted based on the container width, not the viewport width. Note that, when using container queries, `cols`, `spacing` and `verticalSpacing` props cannot reference `theme.breakpoints` values in keys. It is required to use exact `px` or `em` values. To see how the grid changes, resize the root element of the demo with the resize handle located at the bottom right corner of the demo: ```python import dash_mantine_components as dmc from dash import html style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", } component = html.Div( # Wrapper div is added for demonstration purposes only, # it is not required in real projects dmc.SimpleGrid( type="container", cols={"base": 1, "300px": 2, "500px": 5}, spacing={"base": 10, "300px": "xl"}, children=[ html.Div("1", style=style), html.Div("2", style=style), html.Div("3", style=style), html.Div("4", style=style), html.Div("5", style=style), ], p="xs", ), style={"resize": "horizontal", "overflow": "hidden", "maxWidth": "100%"}, ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------|:-------------------------|:-------------------------------------------------| | root | .mantine-SimpleGrid-root | Root element | ### Keyword Arguments #### SimpleGrid - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - cols (number; optional): Number of columns, `1` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - spacing (number; optional): Spacing between columns, `'md'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - type (a value equal to: 'media', 'container'; optional): Determines typeof of queries that are used for responsive styles, 'media' by default. - variant (string; optional): variant. - verticalSpacing (number; optional): Spacing between rows, `'md'` by default. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Space Use the Space component to add horizontal or vertical spacing from theme. Category: Layout ### Simple Example Space component can be customized with two props: `h` and `w`, shortcuts for height and width. These can take either values from Mantine's theme i.e. xs, sm, md, lg, xl or number. ```python import dash_mantine_components as dmc from dash import html component = html.Div( [ dmc.Group([dmc.Badge("Badge 1"), dmc.Badge("Badge 2")]), dmc.Space(h="xl"), dmc.Group([dmc.Badge("Badge 1"), dmc.Space(w="lg"), dmc.Badge("Badge 2")]), dmc.Space(h=30), dmc.Group([dmc.Badge("Badge 1"), dmc.Space(w=45), dmc.Badge("Badge 2")]), ] ) ``` ### Where to use In most cases, you would want to use margin props instead of `Space` when working with Mantine components: ```python import dash_mantine_components as dmc from dash import html html.Div([ dmc.Text("First line"), dmc.Text("Second line", mt="md"), ]) ``` But when you work with other components like `html` or `dcc`, you do not have access to Mantine's theme spacing, and you may want to use dmc.Space component: ```python import dash_mantine_components as dmc from dash import html html.Div([ html.P("First line"), dmc.Space(h="md"), html.P("Second line"), ]) ``` ### Keyword Arguments #### Space - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - className (string; optional): Class added to the root element, if applicable. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - tabIndex (number; optional): tab-index. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Stack Use Stack component to compose elements and components in a vertical flex container Category: Layout ### Usage `Stack` is a vertical flex container. If you need a horizontal flex container, use `Group` component instead. If you need to have full control over flex container properties, use `Flex` component. Adjust stack styles with `align`, `justify`, and `gap` props. ```python import dash_mantine_components as dmc component = dmc.Stack( [ dmc.Button("1", variant="outline"), dmc.Button("2", variant="outline"), dmc.Button("3", variant="outline"), ], align="center", gap="xl", ) ``` ### Interactive Demo ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Stack Selectors | Selector | Static selector | Description | |----------|-------------------------|----------------| | root | .mantine-Stack-root | Root element | #### Stack CSS Variables | Selector | Variable | Description | |----------|------------------|---------------------------------| | root | --stack-align | Controls `align-items` property | | | --stack-justify | Controls `justify-content` property | | | --stack-gap | Controls `gap` property | ### Keyword Arguments #### Stack - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - align (optional): Controls `align-items` CSS property, `'stretch'` by default. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - gap (string | number; optional): Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem, `'md'` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - justify (optional): Controls `justify-content` CSS property, `'flex-start'` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Box Base component for all Mantine components Category: Miscellaneous ### Usage The `Box` component serves as a base for all other components and can be used as a replacement for `html.Div` as a basic container. The key advantage of using `Box` is its support for [Style Props](/style-props), allowing for cleaner, more readable styling directly within the component. ### Example Both examples below produce the same result: ```python # Using html.Div html.Div( [ # your content here ], style={"marginTop": 8, "padding": 24} ) # Using dmc.Box with Style Props dmc.Box( [ # your content here ], mt=8, p=24 ) ``` > Please see the [Style Props](/style-props) section for more information. ### Keyword Arguments #### Box - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - className (string; optional): Class added to the root element, if applicable. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - tabIndex (number; optional): tab-index. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Collapse Use the Collapse component to animate presence with slide down/up transition Category: Miscellaneous ### Simple Example ```python from dash import callback, Input, Output import dash_mantine_components as dmc component = dmc.Box([ dmc.Button("Toggle Content", id="collapse-btn", n_clicks=0), dmc.Collapse( children=dmc.Text("Hello World!", my="lg"), opened=False, id="collapse-simple" ) ]) @callback( Output("collapse-simple", "opened"), Input("collapse-btn", "n_clicks"), ) def update(n): if n % 2 == 0: return False return True ``` ### Change transition Set following props to control transition: - `transitionDuration` – duration in ms - `transitionTimingFunction` – [CSS timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) ("ease", "linear", etc.), defaults to "ease" ```python from dash import callback, Input, Output import dash_mantine_components as dmc component = dmc.Box([ dmc.Button("Toggle Content", id="collapse-transition-btn", n_clicks=0), dmc.Collapse( children=dmc.Text("Hello World!", my="lg"), opened=False, transitionDuration=1000, transitionTimingFunction="linear", id="collapse-transition" ) ]) @callback( Output("collapse-transition", "opened"), Input("collapse-transition-btn", "n_clicks"), ) def update(n): if n % 2 == 0: return False return True ``` ### Nested Collapse components ```python from dash import callback, Input, Output import dash_mantine_components as dmc component = dmc.Box([ dmc.Button("Toggle Content", id="collapse-root-btn", n_clicks=0, mb="sm", size="lg"), dmc.Collapse( children=dmc.Box([ dmc.Text("Hello World!", mt="lg"), dmc.Button( "Toggle Content", id="collapse-inner-btn", n_clicks=0, variant="outline", size="sm", my="lg", ml="lg" ), dmc.Collapse(children= dmc.Text("Hello Nested Worlds!", ml="lg"), id="collapse-inner") ]), opened=False, id="collapse-root" ) ]) @callback( Output("collapse-root", "opened"), Input("collapse-root-btn", "n_clicks"), ) def update(n): if n % 2 == 0: return False return True @callback( Output("collapse-inner", "opened"), Input("collapse-inner-btn", "n_clicks"), ) def update(n): if n % 2 == 0: return False return True ``` ### Keyword Arguments #### Collapse - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - animateOpacity (boolean; optional): Determines whether opacity should be animated, `True` by default. - aria-* (string; optional): Wild card aria attributes. - className (string; optional): Class added to the root element, if applicable. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - keepMounted (boolean; optional): Keep element in DOM when collapsed, useful for nested collapses. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - opened (boolean; default False): Opened state. - tabIndex (number; optional): tab-index. - transitionDuration (number; optional): Transition duration in ms, `200` by default. - transitionTimingFunction (string; optional): Transition timing function, default value is `ease`. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Divider Use Divider component as an alternative to html.Hr. Category: Miscellaneous ### Simple Example ```python import dash_mantine_components as dmc component = dmc.Stack( children=[ dmc.Divider(variant="solid"), dmc.Divider(variant="dashed"), dmc.Divider(variant="dotted"), ], ) ``` ### With Label You can provide `label` and `labelPosition` to customize dmc.Divider. ```python import dash_mantine_components as dmc component = dmc.Stack( [ dmc.Divider(label="Click on update button to refresh"), dmc.Divider(label="Divider with centered content", labelPosition="center"), dmc.Divider(label="Divider with content on the right", labelPosition="right"), ], ) ``` ### Different Sizes Set the `size` property to change the size of the divider. ```python import dash_mantine_components as dmc component = dmc.Stack( children=[ dmc.Divider(size="xs"), dmc.Divider(size="sm"), dmc.Divider(size="md"), dmc.Divider(size="lg"), dmc.Divider(size="xl"), dmc.Divider(size=10), ], ) ``` ### Vertical Divider Divider can be used in vertical orientations by setting `orientation="vertical"` and providing it some height. ```python import dash_mantine_components as dmc component = dmc.Group( [ dmc.Badge("Badge 1"), dmc.Divider(orientation="vertical", style={"height": 20}), dmc.Badge("Badge 2"), dmc.Divider(orientation="vertical", style={"height": 20}), dmc.Badge("Badge 3"), ] ) ``` ### With Color Set the Divider color from one of the colors of Mantine default theme using the `color` prop. ```python import dash_mantine_components as dmc component = dmc.Divider(color="red") ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------|:-----------------------|:--------------| | root | .mantine-Divider-root | Root element | | label | .mantine-Divider-label | Label element | ### Keyword Arguments #### Divider - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color value, by default value depends on color scheme. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - label (a list of or a singular dash component, string or number; optional): Divider label, visible only when `orientation` is `horizontal`. - labelPosition (a value equal to: 'left', 'right', 'center'; optional): Controls label position, `'left'` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - orientation (a value equal to: 'horizontal', 'vertical'; optional): Controls orientation, `'horizontal'` by default. - size (number; optional): Controls width/height (depends on orientation), `'xs'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Paper Render white or dark background depending on color scheme with Paper component with border, shadow, etc. Category: Miscellaneous ### Introduction Paper component renders white (or theme.colors.dark[7] for dark theme) background with shadow, border-radius and padding from theme. ### Shadow ```python import dash_mantine_components as dmc dmc.Paper( children=[], shadow="xs", ) ``` ### Padding ```python import dash_mantine_components as dmc dmc.Paper( children=[], p="xs", # or p=10 for padding of 10px ) ``` ### Radius ```python import dash_mantine_components as dmc dmc.Paper( children=[], radius="sm", # or p=10 for border-radius of 10px ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:-----|:--------------------|:-------------| | root | .mantine-Paper-root | Root element | ### Keyword Arguments #### Paper - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @,default,`theme.defaultRadius`. - shadow (optional): Key of `theme.shadows` or any valid CSS value to set `box-shadow`. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBorder (boolean; optional): Adds border to the root element. ## ScrollArea Use the ScrollArea component to customize scrollbars. Category: Miscellaneous ### Introduction The ScrollArea component supports the following props: - `type` defines scrollbars behavior: - `hover` - scrollbars are visible on hover - `scroll` - scrollbars are visible on scroll - `auto` - similar to `overflow: auto` - scrollbars are always visible when the content is overflowing - `always` - same as auto but scrollbars are always visible regardless of whether the content is overflowing - `never` - scrollbars are always hidden - `offsetScrollbars` - offset scrollbars with padding - x – adds padding to offset horizontal scrollbar only - y – adds padding to offset vertical scrollbar only - xy – adds padding to offset both scrollbars - present – adds padding only when scrollbars are visible - `scrollbarSize` - scrollbar size, controls scrollbar and thumb width/height - `scrollHideDelay` - delay in ms to hide scrollbars, applicable only when type is hover or scroll - `overscrollBehavior` – controls overscroll-behavior of the viewport - `scrollTo` sets scroll position of the viewport This example has a vertical scroll bar. This is how the ScrollArea height and width is defined in the example above ```python html.Div( [ dmc.Title("Charizard (Pokémon)", order=3), dmc.ScrollArea( h=250, w=350, children = dmc.Paper(dmc.Text(text), withBorder=True), ) ] ) ``` ### Horizontal scrollbars The horizontal scroll bar will be displayed when the content of the ScrollArea is wider than the ScrollArea. ```python import dash_mantine_components as dmc from docs.scrollarea.text import text component = dmc.Center( dmc.ScrollArea( h=250, w=350, children=dmc.Paper( [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600 ), ), ) ``` ### Disable horizontal scrollbars To disable horizontal scrollbars set `scrollbars="y"` prop: ```python import dash_mantine_components as dmc from docs.scrollarea.text import text component = dmc.Center( dmc.ScrollArea( h=250, w=350, scrollbars="y", children=dmc.Paper( [dmc.Title("Charizard (Pokémon)", order=3), dmc.Text(text)], w=600 ), ), ) ``` ### Scroll To The `scrollTo` prop sets the scroll position of the viewport with the following options: * `top` – The vertical position as pixels (number) or percentage (string) from '0%' to '100%' * `left` – The horizontal position as pixels (number) or percentage (string) from '0%' to '100%' * `behavior` – scroll behavior: `auto` (instant) or `smooth` (animated), `smooth` by default For example: ```python # Scroll to specific pixel positions dmc.ScrollArea(scrollTo={"top": 100, "left": 50}) # Scroll to percentage positions dmc.ScrollArea(scrollTo={"top": "25%", "left": "75%"}) # Mixed usage dmc.ScrollArea(scrollTo={"top": 200, "left": "50%", "behavior": "auto"}) ``` --- ```python import dash_mantine_components as dmc from dash import callback, Input, Output, ctx content = [ dmc.Box([ dmc.Title(f"Section {i}", order=4, mt="sm", id=f"section-{i}"), dmc.Text(""" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta perspiciatis reiciendis voluptate eaque itaque quos. Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos necessitatibus expedita delectus veniam culpa! """) ]) for i in range(1, 11) ] component = dmc.Box([ dmc.ScrollArea( content, id="scrollArea", h=250, w=350, ), dmc.Group([ dmc.Button("Scroll to Top", id="scrollto-top"), dmc.Button("Scroll to Middle", id="scrollto-middle"), dmc.Button("Scroll to Bottom", id="scrollto-bottom"), ], mt="lg"), ]) @callback( Output("scrollArea", "scrollTo"), Input("scrollto-top", "n_clicks"), Input("scrollto-middle", "n_clicks"), Input("scrollto-bottom", "n_clicks"), ) def scroll_to(t, m, b): if ctx.triggered_id == "scrollto-middle": return {"top": "50%"} if ctx.triggered_id == "scrollto-bottom": return {"top": "100%"} return {"top": 0} ``` ### ScrollAreaAutosize `ScrollAreaAutosize` component allows to create scrollable containers when given max-height is reached. ```python import dash_mantine_components as dmc from dash import callback, Output, Input, ctx lorem = ( "Lorem ipsum, dolor sit amet consectetur adipisicing elit. " "Dicta perspiciatis reiciendis voluptate eaque itaque quos. " "Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos " "necessitatibus expedita delectus veniam culpa!" ) component = dmc.Stack( [ dmc.ScrollAreaAutosize(mah=300, maw=400, p="sm", id="scrollarea-autosize"), dmc.Group( m="lg", children=[ dmc.Button( "1 paragraph", id="btn-1-paragraph", color="red", ), dmc.Button( "4 paragraphs", id="btn-4-paragraphs", ), ], ), ] ) @callback( Output("scrollarea-autosize", "children"), Input("btn-1-paragraph", "n_clicks"), Input("btn-4-paragraphs", "n_clicks"), ) def update_paragraphs(inc, dec): if ctx.triggered_id == "btn-1-paragraph": return dmc.Box(lorem, p="sm") return [dmc.Box(lorem, p="sm") for _ in range(4)] ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### ScrollArea Selectors | Selector | Static selector | Description | | --------- | ------------------------------- | ------------------------------------------------- | | root | `.mantine-ScrollArea-root` | Root element | | content | `.mantine-ScrollArea-content` | Wraps component children | | viewport | `.mantine-ScrollArea-viewport` | Main scrollable area | | scrollbar | `.mantine-ScrollArea-scrollbar` | Horizontal or vertical scrollbar root | | thumb | `.mantine-ScrollArea-thumb` | Scrollbar thumb | | corner | `.mantine-ScrollArea-corner` | Corner between horizontal and vertical scrollbars | #### ScrollArea CSS variables | Selector | Variable | Description | |----------|------------------------------|----------------| | root | `--scrollarea-scrollbar-size` | Scrollbar size | #### ScrollArea data attributes | Selector | Attribute | Condition | Value | |------------------|--------------------|------------------------------------|-------------------------------------| | scrollbar, corner| `data-hidden` | `type="never"` | – | | corner | `data-hovered` | One of the scrollbars is hovered | – | | scrollbar | `data-orientation` | – | "horizontal" or "vertical" depending on scrollbar position | ### Keyword Arguments #### ScrollArea - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - offsetScrollbars (boolean; optional): Determines whether scrollbars should be offset with padding on given axis, `False` by default. - overscrollBehavior (optional): Defines `overscroll-behavior` of the viewport. https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior. - scrollHideDelay (number; optional): Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`, `1000` by default. - scrollTo (dict; optional): Scroll to a position in the scroll area. `scrollTo` is a dict with keys: - scrollbarSize (string | number; optional): Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 0.75rem. - scrollbars (boolean; optional): Axis at which scrollbars must be rendered, `'xy'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - type (a value equal to: 'auto', 'always', 'scroll', 'hover', 'never'; optional): Defines scrollbars behavior, `hover` by default - `hover` – scrollbars are visible when mouse is over the scroll area - `scroll` – scrollbars are visible when the scroll area is scrolled - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## VisuallyHidden Hide element visually but keep it accessible for screen readers Category: Miscellaneous ### Usage `VisuallyHidden` is a utility component that hides content visually but leaves it available to screen readers. This example uses it with the `ActionIcon` component: ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.ActionIcon([ DashIconify(icon="mdi:heart-outline"), dmc.VisuallyHidden("Like post") ], variant="outline") ``` ### Keyword Arguments #### VisuallyHidden - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Anchor Use the Anchor component to add links with Mantine's theme styles. Category: Navigation ### Simple Example dmc.Anchor is a wrapper around dmc.Text component and works similar to dcc.Link, so you can use it with multipage apps. It takes the same props as dmc.Text. ```python import dash_mantine_components as dmc component = dmc.Anchor( "Dash Mantine Components Announcement", href="https://community.plotly.com/t/dash-mantine-components/58414", ) ``` ### Underline ```python import dash_mantine_components as dmc component = dmc.Group([ dmc.Anchor( "Underline always", href="https://www.dash-mantine-components.com/", target="_blank", underline = "always", ), dmc.Anchor( "Underline on hover", href="https://www.dash-mantine-components.com/", target="_blank", underline = "hover", ), dmc.Anchor( "Underline never", href="https://www.dash-mantine-components.com/", target="_blank", underline = "never", ), dmc.Anchor( "Underline not hover", href="https://www.dash-mantine-components.com/", target="_blank", underline = "not-hover", ), ]) ``` You can also configure underline prop for all Anchor components with default props: ```python dmc.MantineProvider( theme={ "components": { "Anchor": { "defaultProps": { "underline": "always", }, }, }, } ) ``` ### Text props Text props `Anchor` components supports all `Text` component props. For example, you can use gradient variant: ```python import dash_mantine_components as dmc component = dmc.Anchor( "A link with pink to yellow gradient", href="#text-props", variant="gradient", gradient={"from": "pink", "to": "yellow"}, fw=500, fz="lg", ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Anchor selectors | Selector | Static selector | Description | |----------|----------------|-------------| | root | .mantine-Anchor-root | Root element | #### Anchor CSS variables | Selector | Variable | Description | |----------|----------|-------------| | root | --text-fz | Controls font-size property | | root | --text-lh | Controls line-height property | | root | --text-gradient | Text fill gradient | | root | --text-line-clamp | Number of lines that should be visible | #### Anchor data attributes | Selector | Attribute | Condition | Value | |----------|-----------|-----------|-------| | root | data-truncate | `truncate` prop is set | Value of `truncate` prop | | root | data-line-clamp | `lineClamp` prop is a number | – | | root | data-inline | `inline` prop is set | – | | root | data-inherit | `inherit` prop is set | – | | root | data-underline | – | Value of `underline` prop | ### Keyword Arguments #### Anchor - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - anchorProps (dict; optional): Props passed down to the `Anchor` component. `anchorProps` is a dict with keys: - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - gradient (dict; optional): Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default. `gradient` is a dict with keys: - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - href (string; required): href. - inherit (boolean; optional): Determines whether font properties should be inherited from the parent, `False` by default. - inline (boolean; optional): Sets `line-height` to 1 for centering, `False` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - lineClamp (number; optional): Number of lines after which Text will be truncated. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - refresh (boolean; optional): Whether to refresh the page. - size (optional): Controls `font-size` and `line-height`, `'md'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - target (a value equal to: '_blank', '_self'; optional): Target. - truncate (boolean; optional): Side on which Text must be truncated, if `True`, text is truncated from the start. - underline (a value equal to: 'always', 'hover', 'never'; optional): Determines in which cases link should have `text-decoration: underline` styles, `hover` by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Breadcrumbs Breadcrumbs is a navigation component that is used to indicate current page's location within a navigational hierarchy. Category: Navigation ### Simple Example Breadcrumbs accept any react nodes as children and places given separator (defaults to `/`) between them. ```python import dash_mantine_components as dmc from dash import dcc, html component = html.Div( [ # default separator dmc.Breadcrumbs( children=[ dcc.Link("Home", href="/"), dcc.Link("Dash Mantine Components", href="/"), dcc.Link("Breadcrumbs", href="/components/breadcrumbs"), ], ), dmc.Space(h=20), # separator provided dmc.Breadcrumbs( separator="→", children=[ dmc.Anchor("Home", href="/", underline=False), dmc.Anchor("Dash Mantine Components", href="/", underline=False), dmc.Anchor( "Breadcrumbs", href="/components/breadcrumbs", underline=False ), ], ), ] ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:-----------|:--------------------------------|:---------------------------| | root | .mantine-Breadcrumbs-root | Root element | | breadcrumb | .mantine-Breadcrumbs-breadcrumb | Breadcrumb item wrapper | | separator | .mantine-Breadcrumbs-separator | Separator between children | ### Keyword Arguments #### Breadcrumbs - children (a list of or a singular dash component, string or number; required): React nodes that should be separated with `separator`. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - separator (a list of or a singular dash component, string or number; optional): Separator between children, `'/'` by default. - separatorMargin (string | number; optional): Controls spacing between separator and breadcrumb, `'xs'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Burger Open/close navigation button. Use the dmc.Burger component to toggle navigation menus. Category: Navigation ### Simple Example Burger component renders open/close menu button. If it's burger state is clicked, the `opened` property is set to `True`, and if it's cross state is clicked, the `opened` property is set to `False`. ```python import dash_mantine_components as dmc from dash import Input, Output, callback, html component = html.Div( [dmc.Burger(id="burger-button", opened=False), dmc.Text(id="burger-state", mt="md")] ) @callback(Output("burger-state", "children"), Input("burger-button", "opened")) def is_open(opened): return str(opened) ``` ### Size and Line Size Use `size` prop to control the `Burger` width and height, numbers are converted to rem, 'md' by default. Use the `lineSize` prop to control height of lines, by default calculated based on `size` prop. ```python dmc.Burger(id="burger-button", opened=False, lineSize=2, size="md") ``` ### Colors ```python import dash_mantine_components as dmc component = dmc.Group( [ dmc.Burger(), dmc.Burger(color="red"), dmc.Burger(color="green"), ] ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Burger Selectors | Selector | Static selector | Description | |----------|--------------------------|---------------------------------------| | root | .mantine-Burger-root | Root element (button) | | burger | .mantine-Burger-burger | Inner element that contains burger lines | #### Burger CSS Variables | Selector | Variable | Description | |----------|-------------------------------------|--------------------------------------------| | root | --burger-line-size | Controls height of lines | | | --burger-color | Controls background-color of lines | | | --burger-size | Controls width and height of the button | | | --burger-transition-duration | Controls transition-duration of lines | | | --burger-transition-timing-function | Controls transition-timing-function of lines | #### Burger Data Attributes | Selector | Attribute | Condition | |----------|--------------|--------------------| | burger | data-opened | `opened` prop is set | ### Keyword Arguments #### Burger - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - lineSize (number; optional): Height of the burger lines. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - opened (boolean; default False): State of the burger, when `True` burger is transformed into X, `False` by default. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - size (number; optional): Controls burger `width` and `height`, numbers are converted to rem, `'md'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - transitionDuration (number; optional): `transition-duration` property value in ms, `300` by default. - transitionTimingFunction (string; optional): `transition-timing-function` property value, `'ease'` by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## NavLink A Navlink component. Category: Navigation ### Basic usage Use `NavLink`'s `n_clicks` property in callbacks, or you can set `href` to make it a link. ```python import dash_mantine_components as dmc from dash import html from dash_iconify import DashIconify def get_icon(icon): return DashIconify(icon=icon, height=16) component = html.Div( [ dmc.NavLink( label="With icon", leftSection=get_icon(icon="bi:house-door-fill"), ), dmc.NavLink( label="With right section", leftSection=get_icon(icon="tabler:gauge"), rightSection=get_icon(icon="tabler-chevron-right"), ), dmc.NavLink( label="Disabled", leftSection=get_icon(icon="tabler:circle-off"), disabled=True, ), dmc.NavLink( label="With description", description="Additional information", leftSection=dmc.Badge( "3", size="xs", variant="filled", color="red", w=16, h=16, p=0 ), ), dmc.NavLink( label="Active subtle", leftSection=get_icon(icon="tabler:activity"), rightSection=get_icon(icon="tabler-chevron-right"), variant="subtle", active=True, ), dmc.NavLink( label="Active light", leftSection=get_icon(icon="tabler:activity"), rightSection=get_icon(icon="tabler-chevron-right"), active=True, ), dmc.NavLink( label="Active filled", leftSection=get_icon(icon="tabler:activity"), rightSection=get_icon(icon="tabler-chevron-right"), variant="filled", active=True, ), ], style={"width": 240}, ) ``` ### Active styles Set `active` prop to add active styles to `NavLink`. You can customize active styles with `color` and `variant` properties. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify dmc.NavLink( label="With right section", leftSection=DashIconify(icon="tabler:gauge"), active=True, variant="filled", color="orange", id="navlink-interactive", rightSection=DashIconify(icon="tabler-chevron-right"), ), ``` ### Setting Active prop based on URL The `active` prop in `NavLink` controls whether a link is highlighted as active. It can be set manually (`True`/`False`) or automatically based on the current URL. *New in dash-mantine-components > = 1.0.0* Now, `active` can be set dynamically: - `"exact"` → Active when the current pathname matches `href`. - `"partial"` → Active when the current pathname starts with `href` (includes subpages). Example: - User on `/page-1/subject-1` → The second and third links are active (since `"partial"` includes subpages). - User on `/page-1` → Only the second link is active. ```python html.Div([ dmc.NavLink(label="Home", href="/home", active="exact"), dmc.NavLink(label="Page 1", href="/page-1", active="partial"), dmc.NavLink(label="Subject 1", href="/page-1/subject-1", active="exact"), ]) ``` See a complete example in Multi-Page App Example with Active Links section. ### Setting active prop in a callback Use a callback to set `active` prop if you are using dash-mantine-components<1.0.0 This example demonstrates how to use a callback to set the `active` prop of the `NavLink` when the user navigates to a different page. It uses the "Dash Pages" feature but can be adapted to any other page navigation system. ```python # Create Navlinks (using dash.page_registry) [ dmc.NavLink( label=f"{page['name']}", href=page["relative_path"], id={"type": "navlink", "index": page["relative_path"]}, ) for page in page_registry.values() ] # ... # Callback (using the dcc.location provided by Dash Pages) @app.callback(Output({"type": "navlink", "index": ALL}, "active"), Input("_pages_location", "pathname")) def update_navlinks(pathname): return [control["id"]["index"] == pathname for control in callback_context.outputs_list] ``` ### Nested NavLinks To create nested links put dmc.NavLink as children of another dmc.NavLink. ```python import dash_mantine_components as dmc from dash import html from dash_iconify import DashIconify def get_icon(icon): return DashIconify(icon=icon, height=16) component = html.Div( style={"width": 240}, children=[ dmc.NavLink( label="First parent link", leftSection=get_icon(icon="tabler:gauge"), childrenOffset=28, children=[ dmc.NavLink(label="First child link"), dmc.NavLink(label="Second child link"), dmc.NavLink( label="Nested parent link", childrenOffset=28, children=[ dmc.NavLink(label="First child link"), dmc.NavLink(label="Second child link"), dmc.NavLink(label="Third child link"), ], ), ], ), dmc.NavLink( label="Second parent link", leftSection=get_icon(icon="tabler:fingerprint"), childrenOffset=28, opened=True, children=[ dmc.NavLink(label="First child link"), dmc.NavLink(label="Second child link"), dmc.NavLink(label="Third child link"), ], ), ], ) ``` ### Multi-Page App Example with Active Links Here's a minimal multi-page app example using Pages. It demonstrates how `active="exact"` and `active="partial"` automatically apply active styles based on the current URL ```python import dash import dash_mantine_components as dmc from dash import Dash, html app = Dash(use_pages=True, pages_folder="") dash.register_page("home", path="/", layout=html.Div("I'm home")) dash.register_page("page1", path="/page-1", layout=html.Div("Info about page 1 subjects")) dash.register_page("page1s1", path="/page-1/sub-1", layout=html.Div("page 1 subject 1")) dash.register_page("page1s2", path="/page-1/sub-2", layout=html.Div("page 1 subject 2")) component = dmc.Box([ dmc.NavLink(label="home", href="/", active='exact'), dmc.NavLink( label="Page 1", childrenOffset=28, href="/page-1", active='partial', children=[ dmc.NavLink(label="Subject 1", href="/page-1/sub-1", active="exact"), dmc.NavLink(label="Subject 2", href="/page-1/sub-2", active="exact"), ], ), dmc.Divider(mb="lg"), dash.page_container ]) app.layout = dmc.MantineProvider([component]) if __name__ == "__main__": app.run(debug=True) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------|:-----------------------------|:---------------------------------------------| | root | .mantine-NavLink-root | Root element | | body | .mantine-NavLink-body | Contains label and description | | section | .mantine-NavLink-section | Left and right sections | | label | .mantine-NavLink-label | NavLink label | | description | .mantine-NavLink-description | Dimmed description displayed below the label | | children | .mantine-NavLink-children | Wrapper around nested links | | chevron | .mantine-NavLink-chevron | Default chevron icon | | collapse | .mantine-NavLink-collapse | Nested links Collapse container | ### Keyword Arguments #### NavLink - children (a list of or a singular dash component, string or number; optional): Child `NavLink` components. - id (string; optional): Unique ID to identify this component in Dash callbacks. - active (boolean; default False): Controls whether the link is styled as active (default: `False`). - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether button text color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. - childrenOffset (number; optional): Key of `theme.spacing` or any valid CSS value to set collapsed links `padding-left`, `'lg'` by default. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` of any valid CSS color to control active styles, `theme.primaryColor` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - description (a list of or a singular dash component, string or number; optional): Link description, displayed below the label. - disableRightSectionRotation (boolean; optional): If set, right section will not be rotated when collapse is opened, `False` by default. - disabled (boolean; optional): If set, disabled styles will be added to the root element, `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - href (string; optional): href. - label (a list of or a singular dash component, string or number; optional): Main link label. - leftSection (a list of or a singular dash component, string or number; optional): Section displayed on the left side of the label. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - n_clicks (number; default 0): An integer that represents the number of times that this element has been clicked on. - noWrap (boolean; optional): If set, label and description will not wrap to the next line, `False` by default. - opened (boolean; default False): Controlled nested items collapse state. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - refresh (boolean; optional): Whether to refresh the page. - rightSection (a list of or a singular dash component, string or number; optional): Section displayed on the right side of the label. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - target (a value equal to: '_blank', '_self'; optional): Target. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Pagination Display active page and navigate between multiple pages Category: Navigation ### Introduction ### Siblings Control the number of active item siblings with `siblings` prop. ```python import dash_mantine_components as dmc component = dmc.Stack( [ dmc.Pagination(total=20, siblings=1, value=10), dmc.Pagination(total=20, siblings=2, value=10, my=15), dmc.Pagination(total=20, siblings=3, value=10), ] ) ``` ### Boundaries Control the number of items displayed after previous(<) and before next(>) buttons with `boundaries` prop. ```python import dash_mantine_components as dmc component = dmc.Stack( [ dmc.Pagination(total=20, boundaries=1, value=10), dmc.Pagination(total=20, boundaries=2, value=10, my=15), dmc.Pagination(total=20, boundaries=3, value=10), ] ) ``` ### Hide pages controls Set `withPages=False` to hide pages controls: ```python from dash import html, Output, Input, callback import dash_mantine_components as dmc limit = 10 total = 145 total_pages = (total + limit - 1) // limit component = dmc.Group( justify="flex-end", children=[ dmc.Text(id="message-withPages", size="sm"), dmc.Pagination(id="pagination-withPages", total=total_pages, value=1, withPages=False), ], ) @callback( Output("message-withPages", "children"), Input("pagination-withPages", "value"), ) def update_message(page): start = limit * (page - 1) + 1 end = min(total, limit * page) return f"Showing {start} – {end} of {total}" ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:--------|:----------------------------|:----------------------------------------------------------| | root | .mantine-Pagination-root | Root element | | control | .mantine-Pagination-control | Control element: items, next/previous, first/last buttons | | dots | .mantine-Pagination-dots | Dots icon wrapper | ### Keyword Arguments #### Pagination - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether active item text color should depend on `background-color` of the indicator. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. - boundaries (number; optional): Number of elements visible on the left/right edges, `1` by default. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors`, active item color, `theme.primaryColor` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): Determines whether all controls should be disabled, `False` by default. - gap (string | number; optional): Key of `theme.spacing`, gap between controls, `8` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - hideWithOnePage (boolean; optional): Determines whether the pagination should be hidden when only one page is available (total=1), False by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default. - siblings (number; optional): Number of siblings displayed on the left/right side of the selected page, `1` by default. - size (number; optional): `height` and `min-width` of controls, `'md'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - total (number; required): Total number of pages, must be an integer. - value (number; optional): Active page for controlled component, must be an integer in [0, total] interval. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withControls (boolean; optional): Determines whether next/previous controls should be rendered, True by default. - withEdges (boolean; optional): Determines whether first/last controls should be rendered, False by default. - withPages (boolean; optional): Determines whether pages controls should be displayed, `True` by default. ## Stepper Use the Stepper, StepperStep and StepperCompleted components to display content divided into a steps sequence Category: Navigation ### Basic usage ```python import dash_mantine_components as dmc from dash import html, Output, Input, State, ctx, callback min_step = 0 max_step = 3 active = 1 component = html.Div( [ dmc.Stepper( id="stepper-basic-usage", active=active, children=[ dmc.StepperStep( label="First step", description="Create an account", children=dmc.Text("Step 1 content: Create an account", ta="center"), ), dmc.StepperStep( label="Second step", description="Verify email", children=dmc.Text("Step 2 content: Verify email", ta="center"), ), dmc.StepperStep( label="Final step", description="Get full access", children=dmc.Text("Step 3 content: Get full access", ta="center"), ), dmc.StepperCompleted( children=dmc.Text( "Completed, click back button to get to previous step", ta="center", ) ), ], ), dmc.Group( justify="center", mt="xl", children=[ dmc.Button("Back", id="back-basic-usage", variant="default"), dmc.Button("Next step", id="next-basic-usage"), ], ), ] ) @callback( Output("stepper-basic-usage", "active"), Input("back-basic-usage", "n_clicks"), Input("next-basic-usage", "n_clicks"), State("stepper-basic-usage", "active"), prevent_initial_call=True, ) def update(back, next_, current): button_id = ctx.triggered_id step = current if current is not None else active if button_id == "back-basic-usage": step = step - 1 if step > min_step else step else: step = step + 1 if step < max_step else step return step ``` ### Color, radius and size You can use any color from Mantine's theme colors. Colors can also be set on individual steps. ```python import dash_mantine_components as dmc dmc.Stepper( active=1, color="green", radius="lg", size="sm", children=[ dmc.StepperStep(label="First step", description="Create an account"), dmc.StepperStep(label="Second step", description="Verify email"), ], ) ``` Component size is controlled by two props: `size` and `iconSize`. `size` prop controls icon size, label and description font size. `iconSize` allows to overwrite icon size separately from other size values. ```python import dash_mantine_components as dmc dmc.Stepper( active=1, iconSize=42, children=[ dmc.StepperStep(label="First step", description="Create an account"), dmc.StepperStep(label="Second step", description="Verify email"), ], ) ``` ### Loading state To indicate loading state set `loading` prop on `Step` component, `Loader` will replace step icon. ```python import dash_mantine_components as dmc from dash import html component = html.Div( [ dmc.Stepper( active=1, children=[ dmc.StepperStep( label="First step", description="Create an account", children=dmc.Text("Step 1 content: Create an account", ta="center"), ), dmc.StepperStep( label="Second step", description="Verify email", children=dmc.Text("Step 2 content: Verify email", ta="center"), loading=True, ), dmc.StepperStep( label="Final step", description="Get full access", children=dmc.Text("Step 3 content: Get full access", ta="center"), ), ], ), ] ) ``` ### Custom icons You can replace step icon by setting `icon` prop on Step component. To change completed check icon set `completedIcon` on Stepper component. You can also change completed icon for each step, for example, to indicate error state. ```python import dash_mantine_components as dmc from dash import callback, Output, Input, State, ctx from dash_iconify import DashIconify min_step = 0 max_step = 3 active = 1 def get_icon(icon): return DashIconify(icon=icon, height=20) component = dmc.Container( [ dmc.Stepper( id="stepper-custom-icons", active=active, children=[ dmc.StepperStep( label="First step", description="Create an account", icon=get_icon(icon="material-symbols:account-circle"), progressIcon=get_icon(icon="material-symbols:account-circle"), completedIcon=get_icon(icon="mdi:account-check"), children=[ dmc.Text("Step 1 content: Create an account", ta="center") ], ), dmc.StepperStep( label="Second step", description="Verify email", icon=get_icon(icon="ic:outline-email"), progressIcon=get_icon(icon="ic:outline-email"), completedIcon=get_icon( icon="material-symbols:mark-email-read-rounded" ), children=[dmc.Text("Step 2 content: Verify email", ta="center")], ), dmc.StepperStep( label="Final step", description="Get full access", icon=get_icon(icon="material-symbols:lock-outline"), progressIcon=get_icon(icon="material-symbols:lock-outline"), completedIcon=get_icon(icon="material-symbols:lock-open-outline"), children=[dmc.Text("Step 3 content: Get full access", ta="center")], ), dmc.StepperCompleted( children=[ dmc.Text( "Completed, click back button to get to previous step", ta="center", ) ] ), ], ), dmc.Group( justify="center", mt="xl", children=[ dmc.Button("Back", id="back-custom-icons", variant="default"), dmc.Button("Next step", id="next-custom-icons"), ], ), ] ) @callback( Output("stepper-custom-icons", "active"), Input("back-custom-icons", "n_clicks"), Input("next-custom-icons", "n_clicks"), State("stepper-custom-icons", "active"), prevent_initial_call=True, ) def update_with_icons(back, next_, current): button_id = ctx.triggered_id step = current if current is not None else active if button_id == "back-custom-icons": step = step - 1 if step > min_step else step else: step = step + 1 if step < max_step else step return step ``` ### Vertical orientation ```python import dash_mantine_components as dmc component = dmc.Stepper( active=1, orientation="vertical", children=[ dmc.StepperStep(label="First step", description="Create an account"), dmc.StepperStep(label="Second step", description="Verify email"), dmc.StepperStep(label="Final step", description="Get full access"), ], ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------------------|:-----------------------------------------|:----------------------------------------------| | root | .mantine-Stepper-root | Root element | | steps | .mantine-Stepper-steps | Steps controls wrapper | | separator | .mantine-Stepper-separator | Separator line between step controls | | verticalSeparator | .mantine-Stepper-verticalSeparator | Vertical separator line between step controls | | separatorActive | .mantine-Stepper-separatorActive | Separator active modifier | | verticalSeparatorActive | .mantine-Stepper-verticalSeparatorActive | Vertical separator active modifier | | content | .mantine-Stepper-content | Current step content wrapper | | stepWrapper | .mantine-Stepper-stepWrapper | Wrapper for the step icon and separator | | step | .mantine-Stepper-step | Step control button | | stepIcon | .mantine-Stepper-stepIcon | Step icon wrapper | | stepCompletedIcon | .mantine-Stepper-stepCompletedIcon | Completed step icon, rendered within stepIcon | | stepBody | .mantine-Stepper-stepBody | Contains stepLabel and stepDescription | | stepLabel | .mantine-Stepper-stepLabel | Step label | | stepDescription | .mantine-Stepper-stepDescription | Step description | | stepLoader | .mantine-Stepper-stepLoader | Step loader | ### Keyword Arguments #### Stepper - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - active (number; required): Index of the active step. - allowNextStepsSelect (boolean; optional): Determines whether next steps can be selected, `True` by default *. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether icon color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps, `theme.primaryColor` by default. - completedIcon (a list of or a singular dash component, string or number; optional): Step icon displayed when step is completed, check icon by default. - contentPadding (number; optional): Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - icon (a list of or a singular dash component, string or number; optional): Step icon, default value is step index + 1. - iconPosition (a value equal to: 'left', 'right'; optional): Icon position relative to the step body, `'left'` by default. - iconSize (string | number; optional): Controls size of the step icon, by default icon size is inferred from `size` prop. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - orientation (a value equal to: 'vertical', 'horizontal'; optional): Stepper orientation, `'horizontal'` by default. - progressIcon (a list of or a singular dash component, string or number; optional): Step icon displayed when step is in progress, default value is step index + 1. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set steps border-radius, `"xl"` by default. - size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional): Controls size of various Stepper elements. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - wrap (boolean; optional): Determines whether steps should wrap to the next line if no space is available, `True` by default. #### StepperStep - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - allowStepClick (boolean; optional): Set to False to disable clicks on step. - allowStepSelect (boolean; optional): Should step selection be allowed. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors`, by default controlled by Stepper component. - completedIcon (a list of or a singular dash component, string or number; optional): Step icon displayed when step is completed. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - description (a list of or a singular dash component, string or number; optional): Step description. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - icon (a list of or a singular dash component, string or number; optional): Step icon, defaults to step index + 1 when rendered within Stepper. - iconPosition (a value equal to: 'left', 'right'; optional): Icon position relative to step body, controlled by Stepper component. - iconSize (number; optional): Icon wrapper size. - label (a list of or a singular dash component, string or number; optional): Step label, render after icon. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading (boolean; optional): Indicates loading state of the step. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - orientation (a value equal to: 'vertical', 'horizontal'; optional): Component orientation. - progressIcon (a list of or a singular dash component, string or number; optional): Step icon displayed when step is in progress. - state (a value equal to: 'stepInactive', 'stepProgress', 'stepCompleted'; optional): Step state, controlled by Stepper component. - step (number; optional): Step index, controlled by Stepper component *. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withIcon (boolean; optional): Determines whether the icon should be displayed. #### StepperCompleted - children (a list of or a singular dash component, string or number; optional) ## TableOfContents Renders a list of headings on the page and tracks current heading visible in the viewport Category: Navigation ### Usage Use the `TableOfContents` component to display a table of contents similar to the sidebar in these docs. The component tracks scroll position and highlights current heading in the list. You can set the style of the `TableOfContents` items (controls) with the `variant`, `color`, `size` and `radius` props: ### Selector `TableOfContents` is based on Mantine’s [`use-scroll-spy`](https://mantine.dev/hooks/use-scroll-spy/) hook. The `selector` prop is passed directly to this hook. The `selector` prop is a CSS selector string used to locate and observe heading elements in the DOM. The default value is `'h1, h2, h3, h4, h5, h6'`. ```python dmc.TableOfContents( selector="h1, h2, h3, h4, h5, h6", # default ) ``` The selector can be scoped to a container and may use any valid CSS selector syntax, including `:is()`, class selectors, or IDs. For example, the following selector matches `h2`, `h3`, and `h4` elements in the `AppShellMain` component, which has the class name `mantine-AppShell-main`: ```python dmc.TableOfContents( selector=".mantine-AppShell-main :is(h2, h3, h4)" ) ``` ### Controls The `TableOfContents` items (controls) are rendered as HTML `` elements. Each control’s `href` attribute is the id of a heading element, and its `children` are set to the heading element’s `textContent`. The active control (the currently visible heading) includes a `data-active="true"` attribute, which can be used for styling or testing. ### Depth offset Use the `minDepthToOffset` prop to control the minimum heading depth at which indentation is applied. By default, `minDepthToOffset` is 1, which means that first and second level headings will not be offset. Set it to 0 to apply offset to all headings. To control offset value in px, set `depthOffset` prop: ```python import dash_mantine_components as dmc component = dmc.TableOfContents( selector=".mantine-AppShell-main :is( h2, h3, h4)", variant="filled", color="blue", size="sm", radius="sm", minDepthToOffset=0, depthOffset=40, w=300 ) ``` ### autoContrast `TableOfContents` supports autoContrast prop and `theme.autoContrast`. If `autoContrast` is set either on `TableOfContents` or on `theme`, content color will be adjusted to have sufficient contrast with the value specified in color prop. Note that `autoContrast` feature works only if you use `color` prop to change background color. `autoContrast` works only with filled variant. ```python import dash_mantine_components as dmc component = dmc.TableOfContents( selector=".mantine-AppShell-main :is( h2, h3, h4)", variant="filled", color="yellow.3", autoContrast=True, size="sm", radius="sm", w=300 ) ``` ### Reinitialize By default, heading changes are not tracked automatically. If the content updates in a callback (for example, when switching tabs) you can trigger a refresh of the `TableOfContents` by setting `reinitialize=True` in a callback. ```python from dash import Dash, html from dash import Input, Output, callback import dash_mantine_components as dmc app = Dash() def make_section(i, name): return dmc.Box( [ dmc.Title(children=f"{name} {i}", id=f"section-{i}", order=3), dmc.Space(h=200), ], p="lg", ) app.layout = dmc.MantineProvider( dmc.AppShell( dmc.AppShellMain( [ dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Tab one", value="1"), dmc.TabsTab("Tab two", value="2"), ] ), ], value="1", id="tabs", ), dmc.Box(id="tabs-content"), dmc.AppShellAside( [ dmc.Title("Table of Contents", order=4, mt=60), dmc.ScrollArea( dmc.TableOfContents( selector="#tabs-content :is( h2, h3, h4)", id="toc" ) ), ] ), ], p="md", ) ) ) @callback( Output("tabs-content", "children"), Output("toc", "reinitialize"), Input("tabs", "value"), ) def render_content(active): if active == "1": return html.Div([make_section(i, "Section") for i in range(30)]), True return html.Div([make_section(i, "Topic") for i in range(30)]), True if __name__ == "__main__": app.run(debug=True) ``` ### target_id With Dash 3+, you do not need to set `reinitialize` in a callback. Instead, set `target_id` to the `id` of a component that is updated by callbacks, and the `TableOfContents` will refresh automatically when that update completes. Using the example above, the callback can be simplified. No `reinitialize` output is required when `target_id` is set: ```python from dash import Dash, html from dash import Input, Output, callback import dash_mantine_components as dmc app = Dash() def make_section(i, name): return dmc.Box( [ dmc.Title(children=f"{name} {i}", id=f"section-{i}", order=3), dmc.Space(h=200), ], p="lg", ) app.layout = dmc.MantineProvider( dmc.AppShell( dmc.AppShellMain( [ dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Tab one", value="1"), dmc.TabsTab("Tab two", value="2"), ] ), ], value="1", id="tabs", ), dmc.Box(id="tabs-content"), dmc.AppShellAside( [ dmc.Title("Table of Contents", order=4, mt=60), dmc.ScrollArea( dmc.TableOfContents( target_id="tabs-content", selector="#tabs-content :is( h2, h3, h4)", ) ), ] ), ], p="md", ) ) ) @callback( Output("tabs-content", "children"), Input("tabs", "value"), ) def render_content(active): if active == "1": return html.Div([make_section(i, "Section") for i in range(30)]) return html.Div([make_section(i, "Topic") for i in range(30)]) if __name__ == "__main__": app.run(debug=True) ``` When using Dash Pages, `target_id` defaults to the page container id, so the table of contents is automatically refreshed on each page change without any additional configuration. ### Dash version support * Dash 3+: `target_id` is supported and replaces the `reinitialize` callback pattern. * Dash 2: Use the `reinitialize` prop in a callback as shown above. ### scrollIntoViewOptions `scrollIntoViewOptions` prop controls how the page scrolls when a heading is clicked in the `TableOfContents`. This prop is passed directly to the browser’s [`Element.scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) API and lets you customize the scrolling behavior and alignment of the target heading. For example, you can enable smooth scrolling or control where the heading appears in the viewport: ```python dmc.TableOfContents( scrollIntoViewOptions={ "behavior": "smooth", "block": "start", } ) ``` ### Apps with fixed headers This example shows how to handle scrolling when the app has a fixed header, such as when using `AppShellHeader` - The `scrollMarginTop` CSS property is applied to headings so that when a `TableOfContents` item is clicked, the heading is not hidden behind the header. - The `offset` prop is passed to the `useScrollSpy` hook to track the correct heading when the app has a fixed header. Set it to the header height so the active item in the `TableOfContents` updates properly when scrolling. ```python import dash from dash import Dash, html import dash_mantine_components as dmc app = Dash(use_pages=True, pages_folder="") logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302" def make_section(i, page): return dmc.Box( [ dmc.Title( children=f"{page} Title {i}", id=str(i), order=3, mb=30, style={"scrollMarginTop": "60px"}, ), ], p="lg", ) header = dmc.AppShellHeader( dmc.Group( [ dmc.Image(src=logo, h=40, flex=0), dmc.Title("Demo App", c="blue"), ], h="100%", px="md", ) ) aside = dmc.AppShellAside( children=dmc.ScrollArea( dmc.Stack( [ dmc.Title("Table of contents", order=5, mt=50), dmc.TableOfContents( variant="filled", color="blue", size="sm", radius="sm", selector="#appshellmain :is( h2, h3, h4, h5, h6)", offset=60, id="toc", ), ] ), type="never", ), px="lg", ) dash.register_page( "home", path="/", layout=html.Div([make_section(i, "home") for i in range(30)]), ) dash.register_page( "page1", path="/page-1", layout=html.Div([make_section(i, "page1") for i in range(30)]), ) app.layout = dmc.MantineProvider( children=dmc.AppShell( [ header, dmc.AppShellNavbar( [ dmc.Title("Page Links", order=5), dmc.NavLink(label="Home", href="/", id="home"), dmc.NavLink(label="Page 1", href="/page-1", id="page-1"), ], p="md", ), dmc.AppShellMain(html.Div(dash.page_container, id="appshellmain")), aside, ], navbar={"width": 200}, header={"height": 60}, ), ) if __name__ == "__main__": app.run(debug=True) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### TableOfContents selectors | Selector | Static selector | Description | | -------- | ---------------------------------- | --------------- | | root | `.mantine-TableOfContents-root` | Root element | | control | `.mantine-TableOfContents-control` | Control element | #### TableOfContents CSS variables | Selector | Variable | Description | | -------- | -------------------- | ---------------------------------------------- | | root | `--toc-bg` | Background color of active control | | root | `--toc-color` | Text color of active control | | root | `--toc-depth-offset` | Offset between controls depending on depth | | root | `--toc-radius` | Border-radius of control | | root | `--toc-size` | Controls font-size and padding of all elements | #### TableOfContents data attributes | Selector | Attribute | Condition | | -------- | ------------- | -------------------------------------------------------------- | | control | `data-active` | Associated heading is currently the best match in the viewport | ### Keyword Arguments #### TableOfContents - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether text color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Active element color. Key of `theme.colors` or any valid CSS color value, `theme.primaryColor` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - depthOffset (string | number; optional): Controls padding on the left side of control, multiplied by (`depth` - `minDepthToOffset`), `20px` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - minDepthToOffset (number; optional): Minimum `depth` value that requires offset, `1` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - offset (number; optional): Offset from the top of the viewport to use when determining the active heading, 0 by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default. - reinitialize (boolean; optional): Forces a re-scan of headings for dynamic content. Can be triggered in a callback. - scrollIntoViewOptions (dict; optional): Set scrollIntoView options. {'behavior': 'auto' | 'instant' | 'smooth', 'block': 'center' | 'end' | 'nearest' | 'start', 'inline': 'center' | 'end' | 'nearest' | 'start'}. `scrollIntoViewOptions` is a dict with keys: - selector (string; optional): CSS Selector to get headings, 'h1, h2, h3, h4, h5, h6' by default. - size (string | number; optional): Controls font-size and padding of all elements, `'md'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - target_id (string; optional): Component id to observe for loading completion (Dash >= 3 only). Defaults to Dash Pages content container '_pages_content'. For Dash 2 use reinitialize prop instead. - variant (a value equal to: 'none', 'light', 'filled'; optional): Controls active element style, `'filled'` by default. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Tabs Use the Tab and Tabs component to switch between views. Category: Navigation ### Usage ```python import dash_mantine_components as dmc dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings"), ] ), dmc.TabsPanel("Gallery tab content", value="gallery"), dmc.TabsPanel("Messages tab content", value="messages"), dmc.TabsPanel("Settings tab content", value="settings"), ], color="red", # default is blue orientation="horizontal", # or "vertical" variant="default", # or "outline" or "pills" value="gallery" ) ``` ### Variants Use the `variant` can be set to `"default"`, `"outline"` or `"pills"` ### Change colors To change colors of all tabs, set `color` on `Tabs` component, to change color of the individual tab, set `color` on `TabsTab`. ```python import dash_mantine_components as dmc component = dmc.Tabs( color="teal", value="first", children=[ dmc.TabsList( children=[ dmc.TabsTab("Teal tab", value="first"), dmc.TabsTab("Blue tab", value="second", color="blue"), ] ), dmc.TabsPanel( "First tab color is teal, it gets this value from context", value="first", pt="xs", ), dmc.TabsPanel( "Second tab color is blue, it gets this value from props, props have the priority and will override context value", value="second", pt="xs", ), ], ) ``` ### Icons on right or left You can use any dash component as icon and rightSection in dmc.TabsTab component. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab( "Gallery", leftSection=DashIconify(icon="tabler:photo"), value="gallery", ), dmc.TabsTab( "Messages", leftSection=DashIconify(icon="tabler:message"), value="messages", ), dmc.TabsTab( "Settings", leftSection=DashIconify(icon="tabler:settings"), value="settings", ), ] ), ], value="messages", ) ``` ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab( "Messages", rightSection=dmc.Badge( "6", size="xs", p=0, variant="filled", circle=True ), value="messages", ), dmc.TabsTab( "Settings", rightSection=DashIconify(icon="tabler:alert-circle", width=16), value="settings", ), ] ), ], value="messages", ) ``` ### Tabs Position `Tabs` controls position is controlled with `grow` and `justify` properties in `TabsList` component. If `grow` property is set to `True`, controls will take 100% of available space and `justify` property is ignored. ```python import dash_mantine_components as dmc dmc.Tabs( children=[ dmc.TabsList( justify="right", grow=False, children=[...], ) # tabs panel below ] ) ``` ### Separated Tabs To display tab on the opposite side, set `margin-left` to auto with `ml="auto"` in `TabsTab` component. ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings", ml="auto"), ] ), ], value="gallery", ) ``` ### Inverted Tabs To make tabs inverted, place `TabsPanel` components before `TabsList` and add `inverted=True` prop to `Tabs` component. ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsPanel("Gallery tab content", value="gallery", pb="xs"), dmc.TabsPanel("Messages tab content", value="messages", pb="xs"), dmc.TabsPanel("Settings tab content", value="settings", pb="xs"), dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings", ml="auto"), ] ), ], value="gallery", inverted=True, ) ``` ### Vertical Tabs placement To change placement of `TabsList` in vertical orientation, set `placement` prop in `Tabs`. ### Disabled tabs Set `disabled=True` prop on `TabsTab` component to disable tab. Disabled tab cannot be activated with mouse or keyboard, and they will be skipped when user navigates with arrow keys: ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages", disabled=True), dmc.TabsTab("Settings", value="settings"), ] ), dmc.TabsPanel("Gallery tab content", value="gallery"), dmc.TabsPanel("Messages tab content", value="messages"), dmc.TabsPanel("Settings tab content", value="settings"), ], value="gallery" ) ``` ### Activation mode By default, tabs are activated when user presses arrows keys or Home/End keys. To disable that set `activateTabWithKeyboard=False` on `Tabs` component. This can be useful if the tab content is updated in a long running callback. Try clicking on a tab to focus, then navigate to other tabs with arrow keys, or home/end keys: ```python import dash_mantine_components as dmc dmc.Tabs( activateTabWithKeyboard=False, children=[ # tabs content ], ) ``` ### Tab deactivation By default, active tab cannot be deactivated. To allow that set `allowTabDeactivation=True` on Tabs component: Try clicking on the active tab to see the deactivated state: ### Content As Callback Attach a callback to the Tabs `value` prop and update a container's `children` property in your callback. ```python import dash_mantine_components as dmc from dash import Input, Output, html, callback from lib.utils import create_graph component = html.Div( [ dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Tab one", value="1"), dmc.TabsTab("Tab two", value="2"), ] ), ], id="tabs-example", value="1", ), html.Div(id="tabs-content", style={"paddingTop": 10}), ] ) @callback(Output("tabs-content", "children"), Input("tabs-example", "value")) def render_content(active): if active == "1": return [dmc.Text("Tab One selected", my=10), create_graph()] else: return [dmc.Text("Tab Two selected", my=10), create_graph()] ``` ### Content As Tab Children Instead of displaying the content through a callback, you can embed the content directly as the `children` property in the Tab component. ```python import dash_mantine_components as dmc from lib.utils import create_graph component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Tab one", value="1"), dmc.TabsTab("Tab two", value="2"), dmc.TabsTab("Tab three", value="3"), ] ), dmc.TabsPanel(create_graph(), value="1"), dmc.TabsPanel(create_graph(), value="2"), dmc.TabsPanel(create_graph(), value="3"), ], value="1", ) ``` ### Styling the Tabs #### With Props This example demonstrates how to style tabs using only props, without requiring additional CSS files: - **Variant**: Sets `variant="pills"` to make the tabs resemble buttons. - **Grow Prop**: Uses the `grow` prop on the `TabsList` component, causing the tabs to expand and fill the full width of the viewport. - **Border**: Adds a border around the tabs with the `bd` prop. For more details, see the [Style Props](/style-props) section. - **Border Color**: Sets the border color using the Mantine CSS variable `var(--mantine-color-default-border)`, ensuring a border color that works well in both light and dark modes. See the [Colors](/colors) section for more details. - **Active Tab Color**: Sets the active tab color with `color="green.3"`. This specifies a lighter shade of a built-in color. Mantine’s color palette includes 10 shades for each color, indexed from 0 (lightest) to 9 (darkest). Learn more in the [Colors](/colors) section. - **Auto Contrast**: Enables `autoContrast=True` to automatically adjust the text color for better readability when using lighter or darker background colors. Additional details can be found in the [Colors](/colors) section. ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings"), ], grow=True, bd="1px solid var(--mantine-color-default-border)" ), dmc.TabsPanel("Gallery tab content", value="gallery"), dmc.TabsPanel("Messages tab content", value="messages"), dmc.TabsPanel("Settings tab content", value="settings"), ], color="green.3", autoContrast=True, variant="pills", value="gallery", ) ``` #### With Styles API This example demonstrates styling tabs using the Styles API, allowing for precise control over the appearance of each element in the tabs component. For more information, see the Styles API section below. ```python import dash_mantine_components as dmc component = dmc.Tabs( [ dmc.TabsList( [ dmc.TabsTab("Gallery", value="gallery"), dmc.TabsTab("Messages", value="messages"), dmc.TabsTab("Settings", value="settings"), ], grow=True ), dmc.TabsPanel("Gallery tab content", value="gallery"), dmc.TabsPanel("Messages tab content", value="messages"), dmc.TabsPanel("Settings tab content", value="settings"), ], value="gallery", classNames={"tab": "dmc-tabs"} ) ``` Put the following in a `.css` file in the `/assets` folder ```css .dmc-tabs { position: relative; border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)); &:first-of-type { border-radius: 4px 0 0 4px; } &:last-of-type { border-radius: 0 4px 4px 0; } & + & { border-left-width: 0; } &:hover { background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); } &[data-active] { z-index: 1; background-color: var(--mantine-color-blue-filled); border-color: var(--mantine-color-blue-filled); color: var(--mantine-color-white); &:hover { background-color: var(--mantine-color-blue-filled-hover); } } } ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. Refer to the Mantine Tabs Style API [interactive demo](https://mantine.dev/core/tabs/#styles-api) for help in identifying each selector. #### Tabs Selectors | Selector | Static selector | Description | |--------------|------------------------------|------------------------------------------| | root | .mantine-Tabs-root | Root element (Tabs component) | | list | .mantine-Tabs-list | List of tabs (Tabs.List component) | | panel | .mantine-Tabs-panel | Panel with tab content (Tabs.Panel component) | | tab | .mantine-Tabs-tab | Tab button (Tabs.Tab component) | | tabLabel | .mantine-Tabs-tabLabel | Label of Tabs.Tab | | tabSection | .mantine-Tabs-tabSection | Left and right sections of Tabs.Tab | #### Tabs CSS Variables | Selector | Variable | Description | |----------|-----------------|--------------------------------------------------------------| | root | --tabs-color | Controls colors of Tabs.Tab, only applicable for `pills` or `default` variant | | | --tabs-radius | Controls Tabs.Tab border-radius | #### Tabs Data Attributes | Selector | Attribute | Condition | Value | |-------------------|--------------------|-------------------------------------------|------------------------------| | root, tab, list, panel | data-orientation | – | Value of `orientation` prop | | root, tab, list | data-placement | `orientation` is "vertical" on Tabs component | Value of `placement` prop | | tab, list | data-inverted | `inverted` prop is set on Tabs component | – | | list | data-grow | `grow` prop is set on Tabs.List component | – | | tabSection | data-position | – | Position of the section (left or right) | ### Keyword Arguments #### Tabs - children (a list of or a singular dash component, string or number; required): Tabs content. - id (string; optional): Base id, used to generate ids to connect labels with controls, generated randomly by default. - activateTabWithKeyboard (boolean; optional): Determines whether tab should be activated with arrow key press, `True` by default. - allowTabDeactivation (boolean; optional): Determines whether tab can be deactivated, `False` by default. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - autoContrast (boolean; optional): Determines whether active item text color should depend on `background-color` of the indicator. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. Only applicable when `variant="pills"`. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inverted (boolean; optional): Determines whether tabs should have inverted styles, `False` by default. - keepMounted (boolean; optional): If set to `False`, `Tabs.Panel` content will be unmounted when the associated tab is not active, `True` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - loop (boolean; optional): Determines whether arrow key presses should loop though items (first to last and last to first), `True` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - orientation (a value equal to: 'vertical', 'horizontal'; optional): Tabs orientation, `'horizontal'` by default. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - placement (a value equal to: 'left', 'right'; optional): `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation="vertical"`, `'left'` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; optional): Value for controlled component. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### TabsList - children (a list of or a singular dash component, string or number; required): `Tabs.Tab` components. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - grow (boolean; optional): Determines whether tabs should take all available space, `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - justify (optional): Tabs alignment, `flex-start` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### TabsPanel - children (a list of or a singular dash component, string or number; required): Panel content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - keepMounted (boolean; optional): If set to `True`, the content will be kept mounted, even if `keepMounted` is set `False` in the parent `Tabs` component. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; required): Value of associated control. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### Tab - children (a list of or a singular dash component, string or number; optional): Tab label. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, controls control color based on `variant`. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): Indicates disabled state. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - leftSection (a list of or a singular dash component, string or number; optional): Content displayed on the left side of the label, for example, icon. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - rightSection (a list of or a singular dash component, string or number; optional): Content displayed on the right side of the label, for example, icon. - size (string | number; optional): Size passed from parent component. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; required): Value of associated panel. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Tree Display a Tree structure Category: Navigation ### Simple Example `Tree` component is used to display hierarchical data. `Tree` component has minimal styling by default, you can customize styles with Styles API. ```python import dash_mantine_components as dmc from .data import data component = dmc.Tree(data=data) ``` ### Data Data passed to the `data` prop should follow these rules: - Data must be an array - Each item in the array represents a node in the tree - Each node must be a dictionary with value and label keys - Each node can have children key with an array of child nodes - The value of each node must be unique ```python # ✅ Valid data, all values are unique valid_data = [ { "value": "src", "label": "src", "children": [ {"value": "src/components", "label": "components"}, {"value": "src/hooks", "label": "hooks"}, ], }, {"value": "package.json", "label": "package.json"}, ] # ❌ Invalid data, values are not unique (components is used twice) invalid_data = [ { "value": "src", "label": "src", "children": [{"value": "components", "label": "components"}], }, {"value": "components", "label": "components"}, ] ``` ### Icon Side The expanded and collapsed icons are on the left side of the label by default. To move them to the right side, set `iconSide="right` ```python import dash_mantine_components as dmc from .data import data component = dmc.Tree(data=data, iconSide="right") ``` ### Remove Expanded Icon By default the `Tree` includes a chevron to indicate expanded and collapsed nodes. To remove the icons, set `expandedIcon=None` ```python import dash_mantine_components as dmc from .data import data component = dmc.Tree(data=data, expandedIcon=None) ``` ### Change Expanded Icon Use any icon in the `expandedIcon` prop. If no `collapsedIcon` is set, the icon will be rotated to indicate the collapsed state. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify from .data import data component = dmc.Tree( data=data, expandedIcon=DashIconify(icon="fa6-solid:arrow-down") ) ``` ### Change Expanded and Collapsed Icons When both the `expandedIcon` and `collapsedIcon` props are set, the icons will not be rotated. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify from .data import data component = dmc.Tree( data=data, expandedIcon=DashIconify(icon="fa6-regular:folder-open"), collapsedIcon=DashIconify(icon="fa6-solid:folder-plus"), ) ``` ### Set Expanded state To set the state of the nodes, use the `expanded` prop. Note that leaf nodes can be included, but it will only change the expanded/collapsed display of the nodes with children. ```python import json import dash_mantine_components as dmc from dash import callback, Input, Output from .data import data component = dmc.Stack([ dmc.Tree( data=data, expanded=[ "node_modules", "node_modules/@mantine", "node_modules/@mantine/form", "node_modules/@mantine/form/index.d.ts", ], id="tree-expanded" ), dmc.CodeHighlight(id="expanded-nodes", code="", language="json"), ]) @callback( Output("expanded-nodes", "code"), Input("tree-expanded", "expanded") ) def update(expanded): return json.dumps( expanded, indent=4) ``` ### Expand or Collapse All Expand all will include all items of the `data` prop in the `expanded` prop. ```python import dash_mantine_components as dmc from dash import callback, Input, Output from .data import data component = dmc.Box([ dmc.SegmentedControl( id="tree-expand-all", data=["Expand All", "Collapse All"], value="Collapse All", mb="sm" ), dmc.Tree( data=data, id="tree-all" ) ],p="lg") @callback( Output("tree-all", "expanded"), Input("tree-expand-all", "value") ) def update(value): if value=="Collapse All": return [] return '*' ``` ### Expanded State in callbacks. When using the expanded property as a callback input to track the user's selected expanded state, note that the `expanded` list may include or exclude leaf nodes (nodes without children) depending on user interaction. This happens because users can toggle the state of leaf nodes, even though they don’t affect how the tree data is displayed. To handle this, ensure your callback logic accounts for the possibility that leaf nodes may or may not be present in the `expanded` prop. Note also that the nodes included in the `expanded` prop are ordered based on user interation and the order of operations. ### With Checkboxes Use the `checked` prop to set or track the checked items. Note that only leaves can be checked, and the order will be based on user interation and the order of operations. ```python import json import dash_mantine_components as dmc from dash import callback, Input, Output from .data import data component = dmc.Stack([ dmc.Tree(data=data, checkboxes=True, id="tree-checkboxes" ), dmc.CodeHighlight(id="checked-nodes", code="", language="json"), ]) @callback( Output("checked-nodes", "code"), Input("tree-checkboxes", "checked") ) def update(checked): return json.dumps( checked, indent=4) ``` ### Custom Tree rendering By default, `dmc.Tree` includes a built-in `renderNode` function that covers most common use cases. It requires no JavaScript and supports some customization through props like `checkboxes`, `expandedIcon`, and `iconSide`. If you need more control over how each node is rendered, such as using custom icons based on the data, arranging content differently or advanced styling, you can provide your own `renderNode` function written in JavaScript. This advanced feature is designed for use cases that go beyond what the built-in options support. #### Ignored Props When you supply your own `renderNode` function, the following props are ignored: * `checkboxes` * `expandedIcon` * `collapsedIcon` * `iconSide` These props only apply when you're using the default built-in renderer. If you're using a custom `renderNode`, you are responsible for rendering icons, checkboxes, or any other visual element. #### Example: Files Tree 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 import dash_iconify # required in order to use DashIconify in the renderNode function from .data import data component = dmc.Tree( data=data, renderNode={"function": "myLeaf"}, expanded=[ "node_modules", "node_modules/react", ] ) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; dmcfuncs.myLeaf = function (payload) { const dmc = window.dash_mantine_components; const iconify = window.dash_iconify; function getIcon(name, isFolder, expanded) { const size = 14; if (name.endsWith('package.json')) { return React.createElement(iconify.DashIconify, { icon: 'logos:npm-icon', width: size, height: size }); } if ( name.endsWith('.ts') || name.endsWith('.tsx') || name.endsWith('tsconfig.json') ) { return React.createElement(iconify.DashIconify, { icon: 'logos:typescript-icon', width: size, height: size }); } if (name.endsWith('.css')) { return React.createElement(iconify.DashIconify, { icon: 'vscode-icons:file-type-css', width: size, height: size }); } if (isFolder) { return React.createElement(iconify.DashIconify, { icon: expanded ? 'tabler:folder-open' : 'tabler:folder', width: size, height: size, color: '#f59f00' // Mantine yellow-9 }); } return null; } const { node, expanded, hasChildren, elementProps } = payload; return React.createElement( dmc.Group, { key: payload.node.value, gap: 5, ...elementProps }, getIcon(node.value, hasChildren, expanded), React.createElement('span', null, node.label) ); }; ``` #### Example: Tree with Checkboxes Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document. If the "With Checkboxes" example above does not meet your needs, you can use the `renderNode` prop to fully customize how each tree node is rendered using JavaScript. When using a custom `renderNode`, you are responsible for implementing the checkbox and expand/collapse logic yourself. To handle the checked state, you'll need to render a `CheckboxIndicator` manually inside your custom render function and call `tree.checkNode(...)` or `tree.uncheckNode(...)` to update it. ```python import json import dash_mantine_components as dmc from dash import callback, Input, Output import dash_iconify # necessary to import here in order to use in the renderNode function from .data import data component = dmc.Stack([ dmc.Tree( data=data, levelOffset=23, expandOnClick=False, renderNode={"function": "myLeafCheckbox"}, id="tree-checkboxes-renderNode" ), dmc.CodeHighlight(id="checked-nodes-renderNode", code="", language="json"), ]) @callback( Output("checked-nodes-renderNode", "code"), Input("tree-checkboxes-renderNode", "checked") ) def update(checked): return json.dumps( checked, indent=4) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; dmcfuncs.myLeafCheckbox = function (payload) { const React = window.React; const dmc = window.dash_mantine_components; const iconify = window.dash_iconify; const { node, expanded, hasChildren, elementProps, tree } = payload; const checked = tree.isNodeChecked(node.value); const indeterminate = tree.isNodeIndeterminate(node.value); return React.createElement( dmc.Group, { key: node.value, gap: "xs", ...elementProps }, [ React.createElement(dmc.CheckboxIndicator, { key: "checkbox", checked, indeterminate, onClick: (e) => { e.stopPropagation(); if (checked) { tree.uncheckNode(node.value); } else { tree.checkNode(node.value); } }, }), React.createElement( dmc.Group, { key: "label-group", gap: 5, onClick: () => tree.toggleExpanded(node.value), }, [ React.createElement("span", { key: "label" }, node.label), hasChildren && React.createElement(iconify.DashIconify, { key: "icon", icon: "tabler:chevron-down", width: 14, style: { transform: expanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease", }, }), ] ), ] ); }; ``` #### renderNode Arguments The `renderNode` function receives a single `payload` object with the following fields: ```js export interface RenderTreeNodePayload { /** Node level in the tree */ level: number; /** `true` if the node is expanded, applicable only for nodes with `children` */ expanded: boolean; /** `true` if the node has non-empty `children` array */ hasChildren: boolean; /** `true` if the node is selected */ selected: boolean; /** Node data from the `data` prop of `Tree` */ node: TreeNodeData; /** Tree controller instance, return value of `useTree` hook */ tree: TreeController; /** Props to spread into the root node element */ elementProps: { className: string; style: React.CSSProperties; onClick: (event: React.MouseEvent) => void; 'data-selected': boolean | undefined; 'data-value': string; 'data-hovered': boolean | undefined; }; } ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Tree Selectors | Selector | Static selector | Description | |----------|--------------------------|-------------------------------------| | root | .mantine-Tree-root | Root element | | node | .mantine-Tree-node | Node element (`li`), contains label and subtree elements | | subtree | .mantine-Tree-subtree | Subtree element (`ul`) | | label | .mantine-Tree-label | Node label | #### Tree CSS Variables | Selector | Variable | Description | |----------|-----------------|---------------------------------------| | root | --level-offset | Controls offset of nested tree levels | #### Tree Data Attributes | Selector | Attribute | Condition | Value | |--------------|----------------|------------------------|------------------------| | node, label | data-selected | The node is selected | – | | node, label | data-hovered | The node is hovered | – | | node | data-level | – | Nesting level of the node | ### Keyword Arguments #### Tree - id (string; optional): Unique ID to identify this component in Dash callbacks. - allowRangeSelection (boolean; optional): Determines whether tree nodes range can be selected with click when Shift key is pressed, `True` by default. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - checkOnSpace (boolean; optional): Determines whether tree node should be checked on space key press, `False` by default. - checkboxes (boolean; optional): Determines if checkboxes should be rendered, `False` by default. Ignored when using a custom `renderNode` function. - checked (list of strings; optional): Determines checked nodes as a list of values (note that only leaves can be checked), `[]` by default. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - clearSelectionOnOutsideClick (boolean; optional): Determines whether selection should be cleared when user clicks outside of the tree, `False` by default. - collapsedIcon (a list of or a singular dash component, string or number; optional): Collapsed state icon. Ignored when using a custom `renderNode` function. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data (list of dicts; required): Data used to render nodes. `data` is a list of dicts with keys: - data-* (string; optional): Wild card data attributes. - expandOnClick (boolean; optional): Determines whether tree node with children should be expanded on click, `True` by default. - expandOnSpace (boolean; optional): Determines whether tree node with children should be expanded on space key press, `True` by default. - expanded (list of strings; optional): Determines expanded nodes as a list of values or `'*'` for all, `[]` by default. - expandedIcon (a list of or a singular dash component, string or number; defaultSource 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)
```
## Version 2.3.0
Release announcement for Dash Mantine Components v2.3.0
Category: Releases
September 21, 2025
Based on Mantine 8.3.1
### New DirectionProvider component
Mantine supports right-to-left (RTL) layouts out of the box. Try the new direction toggle in the header of these
docs — one click and the entire app flips to RTL. Not just the text, but every component adapts. Check out the [sliders](/components/slider)
in RTL mode, they feel completely natural.
See the [RTL (right-to-left) direction guide](/rtl) for details on enabling RTL direction and adding a toggle to your app.
```python
app.layout = dmc.DirectionProvider(
dmc.MantineProvider([
# your app layout
]),
direction="rtl"
)
```
### New MiniCalendar component
The new [MiniCalendar](/components/mini-calendar) component makes it easy to add compact calendars.
```python
import dash_mantine_components as dmc
from dash import callback, Input, Output
component = dmc.Stack([
dmc.MiniCalendar(
defaultDate="2025-01-02",
value="2025-01-03",
id="mini-calendar"
),
dmc.Text(id="mini-calendar-date", m="md")
])
@callback(
Output("mini-calendar-date", "children"),
Input("mini-calendar", "value"),
)
def update(d):
return f"You selected: {d}"
```
### Progress vertical orientation
[Progress](/components/progress) now supports vertical orientation:
```python
import dash_mantine_components as dmc
component = dmc.Group([
dmc.Progress(value=80, orientation="vertical", h=200),
dmc.Progress(
value=60,
color="orange",
size="xl",
orientation="vertical",
h=200,
animated=True
),
dmc.ProgressRoot(
size="xl",
autoContrast=True,
orientation="vertical",
h=200,
children=[
dmc.ProgressSection(
value=40,
color="lime.4",
children=dmc.ProgressLabel("Documents")
),
dmc.ProgressSection(
value=20,
color="yellow.4",
children=dmc.ProgressLabel("Apps")
),
dmc.ProgressSection(
value=20,
color="cyan.7",
children=dmc.ProgressLabel("Other")
)
]
)
])
```
### RichTextEditor upgraded to Tiptap V3
[RichTextEditor](/components/richtexteditor) is now built on Tiptap V3 enabling features like `BackgroundColor`,
`FontFamily`, `FontSize`, `LineHeight`.
Note: This change has no known breaking changes, but customizations may be affected. See our [migration guide,](https://www.dash-mantine-components.com/migration) for details.
Here is an example of creating custom buttons to change the font size:
```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify
component = dmc.RichTextEditor(
html="Change font size with the controls!
", toolbar={ "controlsGroups": [ ["H1", "H2", "H3", "H4"], [ { "CustomControl": { "aria-label": "Increase font size", "title": "Increase font size", "children": DashIconify(icon="mdi:format-font-size-increase", width=16), "onClick": {"function": "increaseFontSize"}, }, }, { "CustomControl": { "aria-label": "Decrease font size", "title": "Decrease font size", "children": DashIconify(icon="mdi:format-font-size-decrease", width=16), "onClick": {"function": "decreaseFontSize"}, }, }, ], ], }, ) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; function changeFontSize(editor, delta) { if (!editor) return; const { from, to } = editor.state.selection; let size = 16; // default editor.state.doc.nodesBetween(from, to, (node) => { if (node.isText) { const mark = node.marks.find(m => m.type.name === "textStyle"); if (mark?.attrs.fontSize) { size = parseInt(mark.attrs.fontSize, 10); } } }); const newSize = Math.min(Math.max(size + delta, 8), 72) + "px"; editor.chain().focus().setFontSize(newSize).run(); } dmcfuncs.increaseFontSize = ({ editor }) => changeFontSize(editor, 2); dmcfuncs.decreaseFontSize = ({ editor }) => changeFontSize(editor, -2); ``` ### ScrollArea scrollTo prop The [ScrollArea](/components/scrollarea), now includes a `scrollTo` prop to control the viewport position. * `top` – The vertical position (pixels or percentage string, from '0%' to '100%') * `left` – The horizontal position (pixels or percentage string, from '0%' to '100%') * `behavior` – `auto` (instant) or `smooth` (animated, default) ```python import dash_mantine_components as dmc from dash import callback, Input, Output, ctx content = [ dmc.Box([ dmc.Title(f"Section {i}", order=4, mt="sm", id=f"section-{i}"), dmc.Text(""" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta perspiciatis reiciendis voluptate eaque itaque quos. Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos necessitatibus expedita delectus veniam culpa! """) ]) for i in range(1, 11) ] component = dmc.Box([ dmc.ScrollArea( content, id="scrollArea", h=250, w=350, ), dmc.Group([ dmc.Button("Scroll to Top", id="scrollto-top"), dmc.Button("Scroll to Middle", id="scrollto-middle"), dmc.Button("Scroll to Bottom", id="scrollto-bottom"), ], mt="lg"), ]) @callback( Output("scrollArea", "scrollTo"), Input("scrollto-top", "n_clicks"), Input("scrollto-middle", "n_clicks"), Input("scrollto-bottom", "n_clicks"), ) def scroll_to(t, m, b): if ctx.triggered_id == "scrollto-middle": return {"top": "50%"} if ctx.triggered_id == "scrollto-bottom": return {"top": "100%"} return {"top": 0} ``` ### New ScrollAreaAutosize component `ScrollAreaAutosize` component creates a scrollable container once a given max-height is reached. ```python import dash_mantine_components as dmc from dash import callback, Output, Input, ctx lorem = ( "Lorem ipsum, dolor sit amet consectetur adipisicing elit. " "Dicta perspiciatis reiciendis voluptate eaque itaque quos. " "Natus iure tenetur libero, reprehenderit ad, sequi, in aliquam eos " "necessitatibus expedita delectus veniam culpa!" ) component = dmc.Stack( [ dmc.ScrollAreaAutosize(mah=300, maw=400, p="sm", id="scrollarea-autosize"), dmc.Group( m="lg", children=[ dmc.Button( "1 paragraph", id="btn-1-paragraph", color="red", ), dmc.Button( "4 paragraphs", id="btn-4-paragraphs", ), ], ), ] ) @callback( Output("scrollarea-autosize", "children"), Input("btn-1-paragraph", "n_clicks"), Input("btn-4-paragraphs", "n_clicks"), ) def update_paragraphs(inc, dec): if ctx.triggered_id == "btn-1-paragraph": return dmc.Box(lorem, p="sm") return [dmc.Box(lorem, p="sm") for _ in range(4)] ``` ### New Overlay component [Overlay](/components/overaly) creates a customizable layer over content or the entire viewport. It’s useful for dimming effects, interactive overlays, and custom loading states. You can configure opacity, color, and positioning. ```python import dash_mantine_components as dmc from dash import Dash, Input, Output, callback, html component = dmc.Stack([ dmc.AspectRatio( ratio=16/9, maw=400, mx="auto", pos="relative", children=[ html.Img( src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png", alt="Demo", ), dmc.Overlay( id="overlay-usage", color="#000", backgroundOpacity=0.85, style={"display": "block"} # Initially visible ) ] ), dmc.Button( "Toggle overlay", id="overlay-toggle-button", mx="auto", mt="lg", n_clicks=0 ) ]) @callback( Output("overlay-usage", "style"), Input("overlay-toggle-button", "n_clicks") ) def toggle_overlay(n_clicks): if n_clicks %2 == 0: return {"display": "block"} return {"display": "none"} ``` ### MultiSelect improvement [MultiSelect](/components/multiselect) now supports `clearSearchOnChange=False` allowing multiple selectios from the same search query. ```python import dash_mantine_components as dmc component = dmc.MultiSelect( data=["aa", "ab", "ac", "ba", "bb", "bc"], value=["aa"], searchable=True, clearSearchOnChange=False ) ``` ### Autocomplete debounce prop The [Autocomplete](/components/autocomplete) component now supports the [debounce prop.](/debounce) This delays the update of the `value` until the user stops interacting, reducing callback frequency. ### LLMs.txt You can now use LLMs.txt file with Cursor and other IDEs. The file is automatically updated with each release and includes every demo and documentation page from the DMC docs site. It is about 1.6MB. You can find the latest version of LLMs.txt and documentation in the [LLMs](/llms) section. ## Version 2.4.0 Release announcement for Dash Mantine Components v2.4.0 Category: Releases November 6, 2025 Based on Mantine 8.3.6 ### Version 2.4.1 December 20, 2025 Based on Mantine 8.3.10 See [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.4.1) ### 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](/components/copybutton). #### Example: Styling the CopyButton ```python 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: Copy from another component: Need a quick way to say “No”? Fetch a random excuse from [No-as-a-Service](https://github.com/hotheadhacker/no-as-a-service) and copy it with a single click. ```python import requests from dash import Input, Output, callback import dash_mantine_components as dmc from dash_iconify import DashIconify component = 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",) ]) @callback( Output("reason-text", "children"), Input("new-reason-btn", "n_clicks"), running=[(Output("new-reason-btn", "loading"), True, False)], ) def fetch_reason(_): try: res = requests.get("https://naas.isalman.dev/no") res.raise_for_status() return res.json().get("reason", "No reason found.") except Exception: return "No reason. Just No." ``` ### 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` (`BubbleChart` only) See the [Functions As Props guide](/functions-as-props) for details. #### Example: format x-axis tick labels This example uses a JavaScript function to format x-axis tick labels for datetime values. ```python 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"}, ) ``` ```javascript 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`, `focus` Thanks for the PR [@chgiesse](https://github.com/chgiesse) - Access Editor API in a clientside callback See examples of all the new features in the [RichTextEditor docs](/components/richtexteditor) #### Example: Editable prop Note the toolbar is hidden when the editor is read-only ```python 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="This editor can be toggled between editable and read-only mode.
", 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: Accessing Editor clientside Get full access to the editor API in clientside callbacks, including executing commands, inspecting content, and updating the editor state. ```python 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="Try typing some text in this editor. Click the button below to see your character and word count.
" ), 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.txt` file 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](/llms) for full details and customization options. ### Other notable updates * Mantine patch updates from 8.3.1 through 8.3.10. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details. * Improved rendering in several components, including the `Stepper`. Thanks to @chgiesse for [PR #664](https://github.com/snehilvj/dash-mantine-components/pull/664). In 2.4.1: * Added `anchorProps` to `Anchor` allowing to pass any valid attribute (like `download`) to the `Anchor` component. Thanks to @jksinton for [PR #676](https://github.com/snehilvj/dash-mantine-components/pull/676). * Added `withAlignedLabels` prop to support offsetting the selected check icon in `Select` and `MultiSelect` * Updated to TipTap 3.14.0 ### Thanks Special thanks to: * [@chgiesse](https://github.com/chgiesse) for contributing two PRs in this release * [@jksinton](https://github.com/jksinton) first time contributor, for ading `anchorProps` prop to `Anchor` * [@BSd3v](https://github.com/BSd3v) for providing help and guidance along the way * [@alexcjohnson](https://github.com/alexcjohnson) for thoughtful feedback during code reviews ## Version 2.5.0 Release announcement for Dash Mantine Components v2.5.0 Category: Releases Jan 26, 2026 Based on Mantine 8.3.13 See [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.5.0) ### New TableofContents Component Use the `TableOfContents` component to display a table of contents similar to the sidebar in these docs. The component tracks scroll position and highlights current heading in the list. Check out all the new features in the [Table Of Contents docs](/components/table-of-contents). *This component was added by @deadkex in [PR #513](https://github.com/snehilvj/dash-mantine-components/pull/513)* ### Custom DMC components You can now build custom Dash components that use Mantine the same way Dash Mantine Components does. Previously, custom components built with the standard Dash component template had to bundle their own copy of Mantine. Because of this, they could not access the `MantineProvider` used by DMC, which meant themes, styles, and context did not work as expected. DMC now exports `MantineHooks` and `MantineCore`, allowing custom components to use the same Mantine hooks, utilities, and context as the built-in components. This enables a wide range of custom components, such as building advanced `Select` or `MultiSelect` on top of Mantine’s [Combobox](https://mantine.dev/core/combobox/), while keeping theme and behavior consistent inside a Dash app. For examples and step-by-step instructions, see the custom DMC components in this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components). *This feature was added by @BSd3v in [PR# 653](https://github.com/snehilvj/dash-mantine-components/pull/653)* ### Improved typing The Python types for DMC components have been improved to better reflect supported props and values. This provides more accurate type hints, better autocomplete, and clearer static checking in editors like VS Code and PyCharm. ### New in the docs: DatePicker presets This feature has been available since dash-mantine-components==2.1.0, but was just added to the documentation thanks to first time contributor [@EstanVW25](https://github.com/snehilvj/dmc-docs/pull/280) [DatePicker](https://www.dash-mantine-components.com/components/datepicker#presets), [DatePickerInput](https://www.dash-mantine-components.com/components/datepicker#presets) and [DateTimePicker](https://www.dash-mantine-components.com/components/datetimepicker#presets) now support `presets` prop that allows you to add custom date presets. Presets are displayed next to the calendar: ```python from datetime import date, timedelta from dateutil.relativedelta import relativedelta import dash_mantine_components as dmc today = date.today() component = dmc.Center( dmc.DatePicker( presets=[ { "value": (today - timedelta(days=1)).isoformat(), "label": "Yesterday", }, { "value": today.isoformat(), "label": "Today", }, { "value": (today + timedelta(days=1)).isoformat(), "label": "Tomorrow", }, { "value": (today + relativedelta(months=1)).isoformat(), "label": "Next month", }, { "value": (today + relativedelta(years=1)).isoformat(), "label": "Next year", }, { "value": (today - relativedelta(months=1)).isoformat(), "label": "Last month", }, { "value": (today - relativedelta(years=1)).isoformat(), "label": "Last year", }, ] ) ) ``` ### Other notable updates * Mantine patch updates from 8.3.10 through 8.3.13. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details. - AppShell: Add static `mode` support for nested app shells - Added `selectFirstOptionOnDropdownOpen` and `openOnFocus`props to Combobox based components. - Fixed `PinInput` so that `value` can be set initially and in a callback ### Thanks Special thanks to: * [@EstanVW25](https://github.com/EstanVW25) first time contributor for adding the Datpeick presets docs. * [@deadkex](https://github.com/deadkex) for your dedication to getting the TableofContent PR over the finishline! * [@BSd3v](https://github.com/BSd3v) for PR #653 to make it possible to make custom DMC components. * [@alexcjohnson](https://github.com/alexcjohnson) for your thoughtful feedback during code reviews. ## Version 2.6.0 Release announcement for Dash Mantine Components v2.6.0 Category: Releases Feb 14, 2026 Based on Mantine 8.3.14 See [Changelog](https://github.com/snehilvj/dash-mantine-components/releases/tag/2.6.0) ### New ColorSchemeToggle Component `ColorSchemeToggle` automatically switches between light and dark themes and persists the user’s selection in localStorage. Copy this app to run it locally. For a live demo, click the `ColorSchemeToggle` in the header of these docs. > The toggle handles theme switching internally and does not require a Dash callback. For more information, see the [ColorSchemeToggle](/components/colorschemetoggle) documentation. ```python import dash_mantine_components as dmc from dash import Dash from dash_iconify import DashIconify app = Dash() component = dmc.ColorSchemeToggle( lightIcon=DashIconify(icon="radix-icons:sun", width=20), darkIcon=DashIconify(icon="radix-icons:moon", width=20), color="yellow", size="lg", m="xl", ) app.layout = dmc.MantineProvider(component) if __name__ == "__main__": app.run(debug=True) ``` ### Prevent flash of incorrect theme on load This release fixes the light/dark “flash” that could occur when the app is loading initially or on refresh. `ColorSchemeToggle` now persists the selected color scheme in `localStorage` (`mantine-color-scheme-value`). The new `pre_render_color_scheme()` helper reads that value and applies the correct Mantine theme before Dash mounts, so the app loads with the proper styles immediately. ```python import dash_mantine_components as dmc dmc.pre_render_color_scheme() ``` Requires `dash>=3.0` and `ColorSchemeToggle` ### Other notable updates - Mantine patch update to 8.3.14. See the [Mantine Releases](https://github.com/mantinedev/mantine/releases) for details. - Fixed prop types in `Grid` and `SimpleGrid` - Fixed incorrect clamping in `NumberInput` when `min` or `max` was set to `None` - New in the docs: Updated Dash Ag Grid examples for theming in versions >=33 ### Thanks Special thanks to: * [@BSd3v](https://github.com/BSd3v) for the `pre_render_color_scheme()` helper function to Fix The Flash! * [@alexcjohnson](https://github.com/alexcjohnson) for your helpful feedback during code reviews. ## CSS Variables How to use CSS variables with Dash Mantine Components. Category: Styling MantineProvider exposes all Mantine CSS variables based on the given theme. You can use these variables in CSS files, style prop or any other styles. See the full list of variables at the bottom of the page. ### Typography variables #### Font family The following CSS variables are used to assign font families to all Mantine components: | Variable | Default value | Description | |:--------------------------------|:------------------------|:---------------------------------------------------------| | `mantine-font-family` | system sans-serif fonts | Controls font-family property of most Mantine components | | `mantine-font-family-monospace` | system monospace fonts | Controls font-family property of code blocks | | `mantine-font-family-headings` | system sans-serif fonts | Controls font-family property of headings | You can control these variables in the [theme](/theme-object). Note that if `theme.headings.fontFamily` is not set, `--mantine-font-family-headings` value will be the same as `--mantine-font-family` ```python theme = { # Controls --mantine-font-family "fontFamily": "Arial, sans-serif", # Controls --mantine-font-family-monospace "fontFamilyMonospace": "Courier New, monospace", "headings": { # Controls --mantine-font-family-headings "fontFamily": "Georgia, serif", }, } dmc.MantineProvider(theme=theme, children=[]) ``` If you want to use system fonts as a fallback for custom fonts, you can reference `dmc.DEFAULT_THEME` value instead of defining it manually: ```python import dash_mantine_components as dmc theme = { "fontFamily": f"Roboto, {dmc.DEFAULT_THEME['fontFamily']}" } ``` You can reference font family variables in your CSS: ```css .text { font-family: var(--mantine-font-family); } .code { font-family: var(--mantine-font-family-monospace); } .heading { font-family: var(--mantine-font-family-headings); } ``` And in `ff` style prop: - `ff="text"` will use `--mantine-font-family` variable - `ff="monospace"` will use `--mantine-font-family-monospace` variable - `ff="heading"` will use `--mantine-font-family-headings` variable ```python dmc.Text( "This text uses --mantine-font-family-monospace variable", ff="monospace" ) ``` #### Font size Font size variables are used in most Mantine components to control text size. The variable that is chosen depends on the component and its size prop. | Variable | Default value | |:--------------------------------|:----------------| | --mantine-font-size-xs | 0.75rem (12px) | | --mantine-font-size-sm | 0.875rem (14px) | | --mantine-font-size-md | 1rem (16px) | | --mantine-font-size-lg | 1.125rem (18px) | | --mantine-font-size-xl | 1.25rem (20px) | You can reference font size variables in CSS: ```css .demo { font-size: var(--mantine-font-size-md); } ``` And in `fz` style prop: ```python dmc.Text( "This text uses --mantine-font-size-xl variable", fz="xl" ) ``` To define custom font sizes, can use `theme.fontSizes` property: ```python theme = { 'fontSizes': { 'xs': '0.5rem', 'sm': '0.75rem', 'md': '1rem', 'lg': '1.25rem', 'xl': '1.5rem', }, } dmc.MantineProvider(theme=theme, children=[]) ``` Note that `theme.fontSizes` dict is merged with the dmc.DEFAULT_THEME – it is not required to define all values, only those that you want to change. ```python theme = { 'fontSizes': {'xs': '0.5rem'} } ``` You can add any number of additional font sizes to the `theme.fontSizes` object. These values will be defined as CSS variables in `--mantine-font-size-{size}` format: ```python theme = { 'fontSizes': { 'xxs': '0.125rem', 'xxl': '2rem', } } ``` After defining `theme.fontSizes`, you can reference these variables in your CSS: ```css .demo { font-size: var(--mantine-font-size-xxs); } ``` > Case conversion > >Case conversion (camelCase to kebab-case) is not automatically applied to custom font sizes. If you define `theme.fontSizes` with camelCase keys, you need to reference them in camelCase format. For example, if you define `{ customSize: '1rem' }`, you need to reference it as `--mantine-font-size-customSize`. #### Line height Line height variables are used in the Text component. In other components, line-height is either calculated based on font size or set to `--mantine-line-height`, which is an alias for `--mantine-line-height-md`. | Variable | Default value | |:------------------------------|:---------------| | --mantine-line-height | 1.55 | | --mantine-line-height-xs | 1.4 | | --mantine-line-height-sm | 1.45 | | --mantine-line-height-md | 1.55 | | --mantine-line-height-lg | 1.6 | | --mantine-line-height-xl | 1.65 | You can reference line height variables in your CSS: ```css .demo { line-height: var(--mantine-line-height-md); } ``` ```python dmc.Text("This text uses --mantine-line-height-xl variable", lh="xl") ``` To define custom line heights, you can use theme.lineHeights property: ```python theme = { 'lineHeights': { 'xs': '1.2', 'sm': '1.3', 'md': '1.4', 'lg': '1.5', 'xl': '1.6', }, } ``` #### Headings `theme.headings` controls `font-size`, `line-height`, `font-weight`, and `text-wrap` CSS properties of headings in `Title` and `TypographyStylesProvider` components. | Variable | Default value | |:--------------------------------|:----------------| | **General variables** | | | --mantine-heading-font-weight | 700 | | --mantine-heading-text-wrap | wrap | | **h1 heading** | | | --mantine-h1-font-size | 2.125rem (34px) | | --mantine-h1-line-height | 1.3 | | --mantine-h1-font-weight | 700 | | **h2 heading** | | | --mantine-h2-font-size | 1.625rem (26px) | | --mantine-h2-line-height | 1.35 | | --mantine-h2-font-weight | 700 | | **h3 heading** | | | --mantine-h3-font-size | 1.375rem (22px) | | --mantine-h3-line-height | 1.4 | | --mantine-h3-font-weight | 700 | | **h4 heading** | | | --mantine-h4-font-size | 1.125rem (18px) | | --mantine-h4-line-height | 1.45 | | --mantine-h4-font-weight | 700 | | **h5 heading** | | | --mantine-h5-font-size | 1rem (16px) | | --mantine-h5-line-height | 1.5 | | --mantine-h5-font-weight | 700 | | **h6 heading** | | | --mantine-h6-font-size | 0.875rem (14px) | | --mantine-h6-line-height | 1.5 | | --mantine-h6-font-weight | 700 | These variables are used in the `Title` component. The `order` prop controls which heading level to use. For example, `order={3}` Title will use: - `--mantine-h3-font-size` - `--mantine-h3-line-height` - `--mantine-h3-font-weight` ```python import dash_mantine_components as dmc from dash import html component = html.Div( [ dmc.Title(f"This is h1 title", order=1), dmc.Title(f"This is h2 title", order=2), dmc.Title(f"This is h3 title", order=3), dmc.Title(f"This is h4 title", order=4), dmc.Title(f"This is h5 title", order=5), dmc.Title(f"This is h6 title", order=6), ] ) ``` You can reference heading variables in your CSS: ```css .h1 { font-size: var(--mantine-h1-font-size); line-height: var(--mantine-h1-line-height); font-weight: var(--mantine-h1-font-weight); } ``` And in fz and lh style props: ```python dmc.Text("This text uses --mantine-h1-* variables", fz="h1", lh="h1") ``` To change heading styles, can use `theme.headings` property: ```python theme = { "headings": { "sizes": { "h1": { "fontSize": "2rem", "lineHeight": "1.5", "fontWeight": "500", }, "h2": { "fontSize": "1.5rem", "lineHeight": "1.6", "fontWeight": "500", }, }, # ... }, } ``` `theme.headings` dict is deeply merged with the default theme – it is not required to define all values, only those that you want to change. ```python theme = { "headings": { "sizes": { "h1": { "fontSize": "2rem", }, }, }, } ``` #### Font smoothing Font smoothing variables control `-webkit-font-smoothing` and `moz-osx-font-smoothing` CSS properties. These variables are used to make text look better on screens with high pixel density. Font smoothing variables are controlled by the `theme.fontSmoothing` theme property, which is `True` by default. If `theme.fontSmoothing` is `False`, both variables will be set to `unset`. | Variable | Default value | |:--------------------------------|:---------------| | --mantine-webkit-font-smoothing | antialiased | | --mantine-moz-font-smoothing | grayscale | If you need to override font smoothing values, the best way is to disable `theme.fontSmoothing` and set global styles on the `body` element: ```python # Disable font smoothing in your theme theme = { "fontSmoothing": False, } ``` Add global styles to your project with desired font smoothing values ```css body { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } ``` ### Colors variables Colors variables are controlled by `theme.colors` and `theme.primaryColor`. Each color defined in the `theme.colors` object is required to have 10 shades. Theme colors can be referenced by their name and shade index, for example, `--mantine-color-red-6`. You can define new colors on the theme object or override existing colors: ```python theme = { "colors": { "demo": [ "#FF0000", "#FF3333", "#FF6666", "#FF9999", "#FFCCCC", "#FFEEEE", "#FFFAFA", "#FFF5F5", "#FFF0F0", "#FFEBEB", ], }, } ``` The code above will define the following CSS variables: | Variable | Default value | |:------------------------------|:---------------| | --mantine-color-demo-0 | #FF0000 | | --mantine-color-demo-1 | #FF3333 | | --mantine-color-demo-2 | #FF6666 | | --mantine-color-demo-3 | #FF9999 | | --mantine-color-demo-4 | #FFCCCC | | --mantine-color-demo-5 | #FFEEEE | | --mantine-color-demo-6 | #FFFAFA | | --mantine-color-demo-7 | #FFF5F5 | | --mantine-color-demo-8 | #FFF0F0 | | --mantine-color-demo-9 | #FFEBEB | #### Variant colors Some Mantine components like `Button` or `Badge` have the `variant` prop that in combination with the `color` prop controls the component text, background, and border colors. For each variant and color, Mantine defines a set of CSS variables that control these colors. For example, for the default blue color the following CSS variables are defined: | Variable | Default value | |:-------------------------------------------------|:------------------------------| | **Filled variant** | | | --mantine-color-blue-filled | var(--mantine-color-blue-6) | | --mantine-color-blue-filled-hover | var(--mantine-color-blue-7) | | **Light variant** | | | --mantine-color-blue-light | rgba(34, 139, 230, 0.1) | | --mantine-color-blue-light-hover | rgba(34, 139, 230, 0.12) | | --mantine-color-blue-light-color | var(--mantine-color-blue-6) | | **Outline variant** | | | --mantine-color-blue-outline | var(--mantine-color-blue-6) | | --mantine-color-blue-outline-hover | rgba(34, 139, 230, 0.05) | For example, if you use Button component the following way: ```python import dash_mantine_components as dmc component = dmc.Button("Pink filled button", color="pink", variant="filled") ``` The component will have the following styles: - Background color will be `var(--mantine-color-pink-filled)` - Background color on hover will be `var(--mantine-color-pink-filled-hover)` - Text color will be `var(--mantine-color-white)` - Border color will be `transparent` Note that the variables above are not static; they are generated based on the values of `theme.colors` and `theme.primaryShade`. Additionally, their values are different for dark and light color schemes. #### Variant Colors Variables Variant colors variables are used in all components that support the `color` prop, for example, `Button`, `Badge`, `Avatar`, and `Pagination`. The color values used by these components are determined by `cssVariablesResolver` and `variantColorResolver`. #### Primary Color Variables Primary color variables are defined by `theme.primaryColor` (which must be a key of `theme.colors`). The following CSS variables are defined for the primary color: | Variable | Default value | |:----------------------------------------------|:---------------------------------------------------| | --mantine-primary-color-{shade} | `var(--mantine-color-{primaryColor}-{shade})` | | --mantine-primary-color-filled | `var(--mantine-color-{primaryColor}-filled)` | | --mantine-primary-color-filled-hover | `var(--mantine-color-{primaryColor}-filled-hover)` | | --mantine-primary-color-light | `var(--mantine-color-{primaryColor}-light)` | | --mantine-primary-color-light-hover | `var(--mantine-color-{primaryColor}-light-hover)` | | --mantine-primary-color-light-color | `var(--mantine-color-{primaryColor}-light-color)` | You can reference primary color variables in CSS: ```css .demo { color: var(--mantine-primary-color-0); background-color: var(--mantine-primary-color-filled); } ``` #### Other Color Variables The following colors are used in various Mantine components. Note that default values are provided for the light color scheme; dark color scheme values are different. | Variable | Description | Default Value | |-----------------------------------|---------------------------------------------------------|----------------------------------| | --mantine-color-white | Value of `theme.white` | #fff | | --mantine-color-black | Value of `theme.black` | #000 | | --mantine-color-text | Color used for text in the body element | var(--mantine-color-black) | | --mantine-color-body | Body background color | var(--mantine-color-white) | | --mantine-color-error | Color used for error messages and states | var(--mantine-color-red-6) | | --mantine-color-placeholder | Color used for input placeholders | var(--mantine-color-gray-5) | | --mantine-color-dimmed | Color used for dimmed text | var(--mantine-color-gray-6) | | --mantine-color-bright | Color used for bright text | var(--mantine-color-black) | | --mantine-color-anchor | Color used for links | var(--mantine-primary-color-6) | | --mantine-color-default | Background color of default variant | var(--mantine-color-white) | | --mantine-color-default-hover | Background color of default variant on hover | var(--mantine-color-gray-0) | | --mantine-color-default-color | Text color of default variant | var(--mantine-color-black) | | --mantine-color-default-border | Border color of default variant | var(--mantine-color-gray-4) | ### Spacing variables `theme.spacing` values are used in most Mantine components to control paddings, margins, and other spacing-related properties. The following CSS variables are defined based on `theme.spacing`: | Variable | Default value | |------------------------|-----------------| | --mantine-spacing-xs | 0.625rem (10px) | | --mantine-spacing-sm | 0.75rem (12px) | | --mantine-spacing-md | 1rem (16px) | | --mantine-spacing-lg | 1.25rem (20px) | | --mantine-spacing-xl | 2rem (32px) | To define custom spacing values, use the `theme.spacing` property: ```python theme = { "spacing": { "xs": "0.5rem", "sm": "0.75rem", "md": "1rem", "lg": "1.5rem", "xl": "2rem", }, } ``` ### Border radius variables Mantine components that support the `radius` prop use border radius variables to control border radius. The following CSS variables are defined based on `theme.radius`: | Variable | Default value | |--------------------------|----------------| | --mantine-radius-xs | 0.125rem (2px) | | --mantine-radius-sm | 0.25rem (4px) | | --mantine-radius-md | 0.5rem (8px) | | --mantine-radius-lg | 1rem (16px) | | --mantine-radius-xl | 2rem (32px) | Additionally, `--mantine-radius-default` variable is defined based on `theme.defaultRadius` value. If the `radius` prop on components is not set explicitly, `--mantine-radius-default` is used instead. To define custom border radius values, use the `theme.radius` and `theme.defaultRadius` properties: ```python theme = { "defaultRadius": "sm", "radius": { "xs": "0.25rem", "sm": "0.5rem", "md": "1rem", "lg": "2rem", "xl": "3rem", }, } ``` ### Shadow variables Shadow variables are used in all Mantine components that support the `shadow` prop. The following CSS variables are defined based on `theme.shadows`: | Variable | Default value | |-----------------------|--------------------------------------------------------------------------------------------------------| | --mantine-shadow-xs | 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) | | --mantine-shadow-sm | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px | | --mantine-shadow-md | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px| | --mantine-shadow-lg | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px| | --mantine-shadow-xl | 0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px| To define custom shadow values, use the `theme.shadows` property: ```python theme = { "shadows": { "xs": "0 1px 2px rgba(0, 0, 0, 0.1)", "sm": "0 1px 3px rgba(0, 0, 0, 0.1)", "md": "0 2px 4px rgba(0, 0, 0, 0.1)", "lg": "0 4px 8px rgba(0, 0, 0, 0.1)", "xl": "0 8px 16px rgba(0, 0, 0, 0.1)", }, } ``` ### z-index variables z-index variables are defined in `@mantine/core/styles.css`. Unlike other variables, z-index variables are not controlled by the theme and are not exposed in the theme object. | Variable | Default value | |---------------------------|---------------| | --mantine-z-index-app | 100 | | --mantine-z-index-modal | 200 | | --mantine-z-index-popover | 300 | | --mantine-z-index-overlay | 400 | | --mantine-z-index-max | 9999 | You can reference z-index variables in CSS: ```css /* Display content above the modal */ .my-content { z-index: calc(var(--mantine-z-index-modal) + 1); } ``` And in components by referencing the CSS variable: ```python import dash_mantine_components as dmc dmc.Modal( zIndex="var(--mantine-z-index-max)", opened=True, children="Modal content" ) ``` ### CSS Variables list #### CSS variables not depending on color scheme #### Light color scheme only variables #### Dark color scheme only variables ### CSS Variables Not Depending on Color Scheme | Variable | Value | |----------|-------| | --mantine-scale | 1 | | --mantine-cursor-type | default | | --mantine-color-scheme | light dark | | --mantine-webkit-font-smoothing | antialiased | | --mantine-moz-font-smoothing | grayscale | | --mantine-color-white | #fff | | --mantine-color-black | #000 | | --mantine-line-height | 1.55 | | --mantine-font-family | -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji | | --mantine-font-family-monospace | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace | | --mantine-font-family-headings | -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji | | --mantine-heading-font-weight | 700 | | --mantine-heading-text-wrap | wrap | | --mantine-radius-default | 0.25rem | | --mantine-primary-color-filled | var(--mantine-color-blue-filled) | | --mantine-primary-color-filled-hover | var(--mantine-color-blue-filled-hover) | | --mantine-primary-color-light | var(--mantine-color-blue-light) | | --mantine-primary-color-light-hover | var(--mantine-color-blue-light-hover) | | --mantine-primary-color-light-color | var(--mantine-color-blue-light-color) | | --mantine-breakpoint-xs | 36em | | --mantine-breakpoint-sm | 48em | | --mantine-breakpoint-md | 62em | | --mantine-breakpoint-lg | 75em | | --mantine-breakpoint-xl | 88em | | --mantine-spacing-xs | 0.625rem | | --mantine-spacing-sm | 0.75rem | | --mantine-spacing-md | 1rem | | --mantine-spacing-lg | 1.25rem | | --mantine-spacing-xl | 2rem | | --mantine-font-size-xs | 0.75rem | | --mantine-font-size-sm | 0.875rem | | --mantine-font-size-md | 1rem | | --mantine-font-size-lg | 1.125rem | | --mantine-font-size-xl | 1.25rem | | --mantine-line-height-xs | 1.4 | | --mantine-line-height-sm | 1.45 | | --mantine-line-height-md | 1.55 | | --mantine-line-height-lg | 1.6 | | --mantine-line-height-xl | 1.65 | | --mantine-shadow-xs | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1) | | --mantine-shadow-sm | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem | | --mantine-shadow-md | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem | | --mantine-shadow-lg | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.75rem 1.4375rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 0.75rem 0.75rem -0.4375rem | | --mantine-shadow-xl | 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 2.25rem 1.75rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 1.0625rem 1.0625rem -0.4375rem | | --mantine-radius-xs | 0.125rem | | --mantine-radius-sm | 0.25rem | | --mantine-radius-md | 0.5rem | | --mantine-radius-lg | 1rem | | --mantine-radius-xl | 2rem | #### Primary Color Shades (0-9) | Variable | Value | |----------|-------| | --mantine-primary-color-0 | var(--mantine-color-blue-0) | | --mantine-primary-color-1 | var(--mantine-color-blue-1) | | --mantine-primary-color-2 | var(--mantine-color-blue-2) | | --mantine-primary-color-3 | var(--mantine-color-blue-3) | | --mantine-primary-color-4 | var(--mantine-color-blue-4) | | --mantine-primary-color-5 | var(--mantine-color-blue-5) | | --mantine-primary-color-6 | var(--mantine-color-blue-6) | | --mantine-primary-color-7 | var(--mantine-color-blue-7) | | --mantine-primary-color-8 | var(--mantine-color-blue-8) | | --mantine-primary-color-9 | var(--mantine-color-blue-9) | #### Color Palette - Dark | Variable | Value | |----------|-------| | --mantine-color-dark-0 | #C9C9C9 | | --mantine-color-dark-1 | #b8b8b8 | | --mantine-color-dark-2 | #828282 | | --mantine-color-dark-3 | #696969 | | --mantine-color-dark-4 | #424242 | | --mantine-color-dark-5 | #3b3b3b | | --mantine-color-dark-6 | #2e2e2e | | --mantine-color-dark-7 | #242424 | | --mantine-color-dark-8 | #1f1f1f | | --mantine-color-dark-9 | #141414 | #### Color Palette - Gray | Variable | Value | |----------|-------| | --mantine-color-gray-0 | #f8f9fa | | --mantine-color-gray-1 | #f1f3f5 | | --mantine-color-gray-2 | #e9ecef | | --mantine-color-gray-3 | #dee2e6 | | --mantine-color-gray-4 | #ced4da | | --mantine-color-gray-5 | #adb5bd | | --mantine-color-gray-6 | #868e96 | | --mantine-color-gray-7 | #495057 | | --mantine-color-gray-8 | #343a40 | | --mantine-color-gray-9 | #212529 | #### Color Palette - Red | Variable | Value | |----------|-------| | --mantine-color-red-0 | #fff5f5 | | --mantine-color-red-1 | #ffe3e3 | | --mantine-color-red-2 | #ffc9c9 | | --mantine-color-red-3 | #ffa8a8 | | --mantine-color-red-4 | #ff8787 | | --mantine-color-red-5 | #ff6b6b | | --mantine-color-red-6 | #fa5252 | | --mantine-color-red-7 | #f03e3e | | --mantine-color-red-8 | #e03131 | | --mantine-color-red-9 | #c92a2a | #### Color Palette - Pink | Variable | Value | |----------|-------| | --mantine-color-pink-0 | #fff0f6 | | --mantine-color-pink-1 | #ffdeeb | | --mantine-color-pink-2 | #fcc2d7 | | --mantine-color-pink-3 | #faa2c1 | | --mantine-color-pink-4 | #f783ac | | --mantine-color-pink-5 | #f06595 | | --mantine-color-pink-6 | #e64980 | | --mantine-color-pink-7 | #d6336c | | --mantine-color-pink-8 | #c2255c | | --mantine-color-pink-9 | #a61e4d | #### Color Palette - Grape | Variable | Value | |----------|-------| | --mantine-color-grape-0 | #f8f0fc | | --mantine-color-grape-1 | #f3d9fa | | --mantine-color-grape-2 | #eebefa | | --mantine-color-grape-3 | #e599f7 | | --mantine-color-grape-4 | #da77f2 | | --mantine-color-grape-5 | #cc5de8 | | --mantine-color-grape-6 | #be4bdb | | --mantine-color-grape-7 | #ae3ec9 | | --mantine-color-grape-8 | #9c36b5 | | --mantine-color-grape-9 | #862e9c | #### Color Palette - Violet | Variable | Value | |----------|-------| | --mantine-color-violet-0 | #f3f0ff | | --mantine-color-violet-1 | #e5dbff | | --mantine-color-violet-2 | #d0bfff | | --mantine-color-violet-3 | #b197fc | | --mantine-color-violet-4 | #9775fa | | --mantine-color-violet-5 | #845ef7 | | --mantine-color-violet-6 | #7950f2 | | --mantine-color-violet-7 | #7048e8 | | --mantine-color-violet-8 | #6741d9 | | --mantine-color-violet-9 | #5f3dc4 | #### Color Palette - Indigo | Variable | Value | |----------|-------| | --mantine-color-indigo-0 | #edf2ff | | --mantine-color-indigo-1 | #dbe4ff | | --mantine-color-indigo-2 | #bac8ff | | --mantine-color-indigo-3 | #91a7ff | | --mantine-color-indigo-4 | #748ffc | | --mantine-color-indigo-5 | #5c7cfa | | --mantine-color-indigo-6 | #4c6ef5 | | --mantine-color-indigo-7 | #4263eb | | --mantine-color-indigo-8 | #3b5bdb | | --mantine-color-indigo-9 | #364fc7 | #### Color Palette - Blue | Variable | Value | |----------|-------| | --mantine-color-blue-0 | #e7f5ff | | --mantine-color-blue-1 | #d0ebff | | --mantine-color-blue-2 | #a5d8ff | | --mantine-color-blue-3 | #74c0fc | | --mantine-color-blue-4 | #4dabf7 | | --mantine-color-blue-5 | #339af0 | | --mantine-color-blue-6 | #228be6 | | --mantine-color-blue-7 | #1c7ed6 | | --mantine-color-blue-8 | #1971c2 | | --mantine-color-blue-9 | #1864ab | #### Color Palette - Cyan | Variable | Value | |----------|-------| | --mantine-color-cyan-0 | #e3fafc | | --mantine-color-cyan-1 | #c5f6fa | | --mantine-color-cyan-2 | #99e9f2 | | --mantine-color-cyan-3 | #66d9e8 | | --mantine-color-cyan-4 | #3bc9db | | --mantine-color-cyan-5 | #22b8cf | | --mantine-color-cyan-6 | #15aabf | | --mantine-color-cyan-7 | #1098ad | | --mantine-color-cyan-8 | #0c8599 | | --mantine-color-cyan-9 | #0b7285 | #### Color Palette - Teal | Variable | Value | |----------|-------| | --mantine-color-teal-0 | #e6fcf5 | | --mantine-color-teal-1 | #c3fae8 | | --mantine-color-teal-2 | #96f2d7 | | --mantine-color-teal-3 | #63e6be | | --mantine-color-teal-4 | #38d9a9 | | --mantine-color-teal-5 | #20c997 | | --mantine-color-teal-6 | #12b886 | | --mantine-color-teal-7 | #0ca678 | | --mantine-color-teal-8 | #099268 | | --mantine-color-teal-9 | #087f5b | #### Color Palette - Green | Variable | Value | |----------|-------| | --mantine-color-green-0 | #ebfbee | | --mantine-color-green-1 | #d3f9d8 | | --mantine-color-green-2 | #b2f2bb | | --mantine-color-green-3 | #8ce99a | | --mantine-color-green-4 | #69db7c | | --mantine-color-green-5 | #51cf66 | | --mantine-color-green-6 | #40c057 | | --mantine-color-green-7 | #37b24d | | --mantine-color-green-8 | #2f9e44 | | --mantine-color-green-9 | #2b8a3e | #### Color Palette - Lime | Variable | Value | |----------|-------| | --mantine-color-lime-0 | #f4fce3 | | --mantine-color-lime-1 | #e9fac8 | | --mantine-color-lime-2 | #d8f5a2 | | --mantine-color-lime-3 | #c0eb75 | | --mantine-color-lime-4 | #a9e34b | | --mantine-color-lime-5 | #94d82d | | --mantine-color-lime-6 | #82c91e | | --mantine-color-lime-7 | #74b816 | | --mantine-color-lime-8 | #66a80f | | --mantine-color-lime-9 | #5c940d | #### Color Palette - Yellow | Variable | Value | |----------|-------| | --mantine-color-yellow-0 | #fff9db | | --mantine-color-yellow-1 | #fff3bf | | --mantine-color-yellow-2 | #ffec99 | | --mantine-color-yellow-3 | #ffe066 | | --mantine-color-yellow-4 | #ffd43b | | --mantine-color-yellow-5 | #fcc419 | | --mantine-color-yellow-6 | #fab005 | | --mantine-color-yellow-7 | #f59f00 | | --mantine-color-yellow-8 | #f08c00 | | --mantine-color-yellow-9 | #e67700 | # ### Color Palette - Orange | Variable | Value | |----------|-------| | --mantine-color-orange-0 | #fff4e6 | | --mantine-color-orange-1 | #ffe8cc | | --mantine-color-orange-2 | #ffd8a8 | | --mantine-color-orange-3 | #ffc078 | | --mantine-color-orange-4 | #ffa94d | | --mantine-color-orange-5 | #ff922b | | --mantine-color-orange-6 | #fd7e14 | | --mantine-color-orange-7 | #f76707 | | --mantine-color-orange-8 | #e8590c | | --mantine-color-orange-9 | #d9480f | #### Heading Sizes | Variable | Value | |----------|-------| | --mantine-h1-font-size | 2.125rem | | --mantine-h1-line-height | 1.3 | | --mantine-h1-font-weight | 700 | | --mantine-h2-font-size | 1.625rem | | --mantine-h2-line-height | 1.35 | | --mantine-h2-font-weight | 700 | | --mantine-h3-font-size | 1.375rem | | --mantine-h3-line-height | 1.4 | | --mantine-h3-font-weight | 700 | | --mantine-h4-font-size | 1.125rem | | --mantine-h4-line-height | 1.45 | | --mantine-h4-font-weight | 700 | | --mantine-h5-font-size | 1rem | | --mantine-h5-line-height | 1.5 | | --mantine-h5-font-weight | 700 | | --mantine-h6-font-size | 0.875rem | | --mantine-h6-line-height | 1.5 | | --mantine-h6-font-weight | 700 | ### Light Color Scheme Only Variables | Variable | Value | |----------|-------| | --mantine-primary-color-contrast | var(--mantine-color-white) | | --mantine-color-bright | var(--mantine-color-black) | | --mantine-color-text | #000 | | --mantine-color-body | #fff | | --mantine-color-error | var(--mantine-color-red-6) | | --mantine-color-placeholder | var(--mantine-color-gray-5) | | --mantine-color-anchor | var(--mantine-color-blue-6) | | --mantine-color-default | var(--mantine-color-white) | | --mantine-color-default-hover | var(--mantine-color-gray-0) | | --mantine-color-default-color | var(--mantine-color-black) | | --mantine-color-default-border | var(--mantine-color-gray-4) | | --mantine-color-dimmed | var(--mantine-color-gray-6) | | --mantine-color-disabled | var(--mantine-color-gray-2) | | --mantine-color-disabled-color | var(--mantine-color-gray-5) | | --mantine-color-disabled-border | var(--mantine-color-gray-3) | | --mantine-color-dark-text | var(--mantine-color-dark-filled) | | --mantine-color-dark-filled | var(--mantine-color-dark-6) | | --mantine-color-dark-filled-hover | var(--mantine-color-dark-7) | | --mantine-color-dark-light | rgba(46, 46, 46, 0.1) | | --mantine-color-dark-light-hover | rgba(46, 46, 46, 0.12) | | --mantine-color-dark-light-color | var(--mantine-color-dark-6) | | --mantine-color-dark-outline | var(--mantine-color-dark-6) | | --mantine-color-dark-outline-hover | rgba(46, 46, 46, 0.05) | | --mantine-color-gray-text | var(--mantine-color-gray-filled) | | --mantine-color-gray-filled | var(--mantine-color-gray-6) | | --mantine-color-gray-filled-hover | var(--mantine-color-gray-7) | | --mantine-color-gray-light | rgba(134, 142, 150, 0.1) | | --mantine-color-gray-light-hover | rgba(134, 142, 150, 0.12) | | --mantine-color-gray-light-color | var(--mantine-color-gray-6) | | --mantine-color-gray-outline | var(--mantine-color-gray-6) | | --mantine-color-gray-outline-hover | rgba(134, 142, 150, 0.05) | | --mantine-color-red-text | var(--mantine-color-red-filled) | | --mantine-color-red-filled | var(--mantine-color-red-6) | | --mantine-color-red-filled-hover | var(--mantine-color-red-7) | | --mantine-color-red-light | rgba(250, 82, 82, 0.1) | | --mantine-color-red-light-hover | rgba(250, 82, 82, 0.12) | | --mantine-color-red-light-color | var(--mantine-color-red-6) | | --mantine-color-red-outline | var(--mantine-color-red-6) | | --mantine-color-red-outline-hover | rgba(250, 82, 82, 0.05) | | --mantine-color-pink-text | var(--mantine-color-pink-filled) | | --mantine-color-pink-filled | var(--mantine-color-pink-6) | | --mantine-color-pink-filled-hover | var(--mantine-color-pink-7) | | --mantine-color-pink-light | rgba(230, 73, 128, 0.1) | | --mantine-color-pink-light-hover | rgba(230, 73, 128, 0.12) | | --mantine-color-pink-light-color | var(--mantine-color-pink-6) | | --mantine-color-pink-outline | var(--mantine-color-pink-6) | | --mantine-color-pink-outline-hover | rgba(230, 73, 128, 0.05) | | --mantine-color-grape-text | var(--mantine-color-grape-filled) | | --mantine-color-grape-filled | var(--mantine-color-grape-6) | | --mantine-color-grape-filled-hover | var(--mantine-color-grape-7) | | --mantine-color-grape-light | rgba(190, 75, 219, 0.1) | | --mantine-color-grape-light-hover | rgba(190, 75, 219, 0.12) | | --mantine-color-grape-light-color | var(--mantine-color-grape-6) | | --mantine-color-grape-outline | var(--mantine-color-grape-6) | | --mantine-color-grape-outline-hover | rgba(190, 75, 219, 0.05) | | --mantine-color-violet-text | var(--mantine-color-violet-filled) | | --mantine-color-violet-filled | var(--mantine-color-violet-6) | | --mantine-color-violet-filled-hover | var(--mantine-color-violet-7) | | --mantine-color-violet-light | rgba(121, 80, 242, 0.1) | | --mantine-color-violet-light-hover | rgba(121, 80, 242, 0.12) | | --mantine-color-violet-light-color | var(--mantine-color-violet-6) | | --mantine-color-violet-outline | var(--mantine-color-violet-6) | | --mantine-color-violet-outline-hover | rgba(121, 80, 242, 0.05) | | --mantine-color-indigo-text | var(--mantine-color-indigo-filled) | | --mantine-color-indigo-filled | var(--mantine-color-indigo-6) | | --mantine-color-indigo-filled-hover | var(--mantine-color-indigo-7) | | --mantine-color-indigo-light | rgba(76, 110, 245, 0.1) | | --mantine-color-indigo-light-hover | rgba(76, 110, 245, 0.12) | | --mantine-color-indigo-light-color | var(--mantine-color-indigo-6) | | --mantine-color-indigo-outline | var(--mantine-color-indigo-6) | | --mantine-color-indigo-outline-hover | rgba(76, 110, 245, 0.05) | | --mantine-color-blue-text | var(--mantine-color-blue-filled) | | --mantine-color-blue-filled | var(--mantine-color-blue-6) | | --mantine-color-blue-filled-hover | var(--mantine-color-blue-7) | | --mantine-color-blue-light | rgba(34, 139, 230, 0.1) | | --mantine-color-blue-light-hover | rgba(34, 139, 230, 0.12) | | --mantine-color-blue-light-color | var(--mantine-color-blue-6) | | --mantine-color-blue-outline | var(--mantine-color-blue-6) | | --mantine-color-blue-outline-hover | rgba(34, 139, 230, 0.05) | | --mantine-color-cyan-text | var(--mantine-color-cyan-filled) | | --mantine-color-cyan-filled | var(--mantine-color-cyan-6) | | --mantine-color-cyan-filled-hover | var(--mantine-color-cyan-7) | | --mantine-color-cyan-light | rgba(21, 170, 191, 0.1) | | --mantine-color-cyan-light-hover | rgba(21, 170, 191, 0.12) | | --mantine-color-cyan-light-color | var(--mantine-color-cyan-6) | | --mantine-color-cyan-outline | var(--mantine-color-cyan-6) | | --mantine-color-cyan-outline-hover | rgba(21, 170, 191, 0.05) | | --mantine-color-teal-text | var(--mantine-color-teal-filled) | | --mantine-color-teal-filled | var(--mantine-color-teal-6) | | --mantine-color-teal-filled-hover | var(--mantine-color-teal-7) | | --mantine-color-teal-light | rgba(18, 184, 134, 0.1) | | --mantine-color-teal-light-hover | rgba(18, 184, 134, 0.12) | | --mantine-color-teal-light-color | var(--mantine-color-teal-6) | | --mantine-color-teal-outline | var(--mantine-color-teal-6) | | --mantine-color-teal-outline-hover | rgba(18, 184, 134, 0.05) | | --mantine-color-green-text | var(--mantine-color-green-filled) | | --mantine-color-green-filled | var(--mantine-color-green-6) | | --mantine-color-green-filled-hover | var(--mantine-color-green-7) | | --mantine-color-green-light | rgba(64, 192, 87, 0.1) | | --mantine-color-green-light-hover | rgba(64, 192, 87, 0.12) | | --mantine-color-green-light-color | var(--mantine-color-green-6) | | --mantine-color-green-outline | var(--mantine-color-green-6) | | --mantine-color-green-outline-hover | rgba(64, 192, 87, 0.05) | | --mantine-color-lime-text | var(--mantine-color-lime-filled) | | --mantine-color-lime-filled | var(--mantine-color-lime-6) | | --mantine-color-lime-filled-hover | var(--mantine-color-lime-7) | | --mantine-color-lime-light | rgba(130, 201, 30, 0.1) | | --mantine-color-lime-light-hover | rgba(130, 201, 30, 0.12) | | --mantine-color-lime-light-color | var(--mantine-color-lime-6) | | --mantine-color-lime-outline | var(--mantine-color-lime-6) | | --mantine-color-lime-outline-hover | rgba(130, 201, 30, 0.05) | | --mantine-color-yellow-text | var(--mantine-color-yellow-filled) | | --mantine-color-yellow-filled | var(--mantine-color-yellow-6) | | --mantine-color-yellow-filled-hover | var(--mantine-color-yellow-7) | | --mantine-color-yellow-light | rgba(250, 176, 5, 0.1) | | --mantine-color-yellow-light-hover | rgba(250, 176, 5, 0.12) | | --mantine-color-yellow-light-color | var(--mantine-color-yellow-6) | | --mantine-color-yellow-outline | var(--mantine-color-yellow-6) | | --mantine-color-yellow-outline-hover | rgba(250, 176, 5, 0.05) | | --mantine-color-orange-text | var(--mantine-color-orange-filled) | | --mantine-color-orange-filled | var(--mantine-color-orange-6) | | --mantine-color-orange-filled-hover | var(--mantine-color-orange-7) | | --mantine-color-orange-light | rgba(253, 126, 20, 0.1) | | --mantine-color-orange-light-hover | rgba(253, 126, 20, 0.12) | | --mantine-color-orange-light-color | var(--mantine-color-orange-6) | | --mantine-color-orange-outline | var(--mantine-color-orange-6) | | --mantine-color-orange-outline-hover | rgba(253, 126, 20, 0.05) | ### Dark Color Scheme Only Variables | Variable | Value | |----------|-------| | --mantine-primary-color-contrast | var(--mantine-color-white) | | --mantine-color-bright | var(--mantine-color-white) | | --mantine-color-text | var(--mantine-color-dark-0) | | --mantine-color-body | var(--mantine-color-dark-7) | | --mantine-color-error | var(--mantine-color-red-8) | | --mantine-color-placeholder | var(--mantine-color-dark-3) | | --mantine-color-anchor | var(--mantine-color-blue-4) | | --mantine-color-default | var(--mantine-color-dark-6) | | --mantine-color-default-hover | var(--mantine-color-dark-5) | | --mantine-color-default-color | var(--mantine-color-white) | | --mantine-color-default-border | var(--mantine-color-dark-4) | | --mantine-color-dimmed | var(--mantine-color-dark-2) | | --mantine-color-disabled | var(--mantine-color-dark-6) | | --mantine-color-disabled-color | var(--mantine-color-dark-3) | | --mantine-color-disabled-border | var(--mantine-color-dark-4) | | --mantine-color-dark-text | var(--mantine-color-dark-4) | | --mantine-color-dark-filled | var(--mantine-color-dark-8) | | --mantine-color-dark-filled-hover | var(--mantine-color-dark-9) | | --mantine-color-dark-light | rgba(46, 46, 46, 0.15) | | --mantine-color-dark-light-hover | rgba(46, 46, 46, 0.2) | | --mantine-color-dark-light-color | var(--mantine-color-dark-3) | | --mantine-color-dark-outline | var(--mantine-color-dark-4) | | --mantine-color-dark-outline-hover | rgba(66, 66, 66, 0.05) | | --mantine-color-gray-text | var(--mantine-color-gray-4) | | --mantine-color-gray-filled | var(--mantine-color-gray-8) | | --mantine-color-gray-filled-hover | var(--mantine-color-gray-9) | | --mantine-color-gray-light | rgba(134, 142, 150, 0.15) | | --mantine-color-gray-light-hover | rgba(134, 142, 150, 0.2) | | --mantine-color-gray-light-color | var(--mantine-color-gray-3) | | --mantine-color-gray-outline | var(--mantine-color-gray-4) | | --mantine-color-gray-outline-hover | rgba(206, 212, 218, 0.05) | | --mantine-color-red-text | var(--mantine-color-red-4) | | --mantine-color-red-filled | var(--mantine-color-red-8) | | --mantine-color-red-filled-hover | var(--mantine-color-red-9) | | --mantine-color-red-light | rgba(250, 82, 82, 0.15) | | --mantine-color-red-light-hover | rgba(250, 82, 82, 0.2) | | --mantine-color-red-light-color | var(--mantine-color-red-3) | | --mantine-color-red-outline | var(--mantine-color-red-4) | | --mantine-color-red-outline-hover | rgba(255, 135, 135, 0.05) | | --mantine-color-pink-text | var(--mantine-color-pink-4) | | --mantine-color-pink-filled | var(--mantine-color-pink-8) | | --mantine-color-pink-filled-hover | var(--mantine-color-pink-9) | | --mantine-color-pink-light | rgba(230, 73, 128, 0.15) | | --mantine-color-pink-light-hover | rgba(230, 73, 128, 0.2) | | --mantine-color-pink-light-color | var(--mantine-color-pink-3) | | --mantine-color-pink-outline | var(--mantine-color-pink-4) | | --mantine-color-pink-outline-hover | rgba(247, 131, 172, 0.05) | | --mantine-color-grape-text | var(--mantine-color-grape-4) | | --mantine-color-grape-filled | var(--mantine-color-grape-8) | | --mantine-color-grape-filled-hover | var(--mantine-color-grape-9) | | --mantine-color-grape-light | rgba(190, 75, 219, 0.15) | | --mantine-color-grape-light-hover | rgba(190, 75, 219, 0.2) | | --mantine-color-grape-light-color | var(--mantine-color-grape-3) | | --mantine-color-grape-outline | var(--mantine-color-grape-4) | | --mantine-color-grape-outline-hover | rgba(218, 119, 242, 0.05) | | --mantine-color-violet-text | var(--mantine-color-violet-4) | | --mantine-color-violet-filled | var(--mantine-color-violet-8) | | --mantine-color-violet-filled-hover | var(--mantine-color-violet-9) | | --mantine-color-violet-light | rgba(121, 80, 242, 0.15) | | --mantine-color-violet-light-hover | rgba(121, 80, 242, 0.2) | | --mantine-color-violet-light-color | var(--mantine-color-violet-3) | | --mantine-color-violet-outline | var(--mantine-color-violet-4) | | --mantine-color-violet-outline-hover | rgba(151, 117, 250, 0.05) | | --mantine-color-indigo-text | var(--mantine-color-indigo-4) | | --mantine-color-indigo-filled | var(--mantine-color-indigo-8) | | --mantine-color-indigo-filled-hover | var(--mantine-color-indigo-9) | | --mantine-color-indigo-light | rgba(76, 110, 245, 0.15) | | --mantine-color-indigo-light-hover | rgba(76, 110, 245, 0.2) | | --mantine-color-indigo-light-color | var(--mantine-color-indigo-3) | | --mantine-color-indigo-outline | var(--mantine-color-indigo-4) | | --mantine-color-indigo-outline-hover | rgba(116, 143, 252, 0.05) | | --mantine-color-blue-text | var(--mantine-color-blue-4) | | --mantine-color-blue-filled | var(--mantine-color-blue-8) | | --mantine-color-blue-filled-hover | var(--mantine-color-blue-9) | | --mantine-color-blue-light | rgba(34, 139, 230, 0.15) | | --mantine-color-blue-light-hover | rgba(34, 139, 230, 0.2) | | --mantine-color-blue-light-color | var(--mantine-color-blue-3) | | --mantine-color-blue-outline | var(--mantine-color-blue-4) | | --mantine-color-blue-outline-hover | rgba(77, 171, 247, 0.05) | | --mantine-color-cyan-text | var(--mantine-color-cyan-4) | | --mantine-color-cyan-filled | var(--mantine-color-cyan-8) | | --mantine-color-cyan-filled-hover | var(--mantine-color-cyan-9) | | --mantine-color-cyan-light | rgba(21, 170, 191, 0.15) | | --mantine-color-cyan-light-hover | rgba(21, 170, 191, 0.2) | | --mantine-color-cyan-light-color | var(--mantine-color-cyan-3) | | --mantine-color-cyan-outline | var(--mantine-color-cyan-4) | | --mantine-color-cyan-outline-hover | rgba(59, 201, 219, 0.05) | | --mantine-color-teal-text | var(--mantine-color-teal-4) | | --mantine-color-teal-filled | var(--mantine-color-teal-8) | | --mantine-color-teal-filled-hover | var(--mantine-color-teal-9) | | --mantine-color-teal-light | rgba(18, 184, 134, 0.15) | | --mantine-color-teal-light-hover | rgba(18, 184, 134, 0.2) | | --mantine-color-teal-light-color | var(--mantine-color-teal-3) | | --mantine-color-teal-outline | var(--mantine-color-teal-4) | | --mantine-color-teal-outline-hover | rgba(56, 217, 169, 0.05) | | --mantine-color-green-text | var(--mantine-color-green-4) | | --mantine-color-green-filled | var(--mantine-color-green-8) | | --mantine-color-green-filled-hover | var(--mantine-color-green-9) | | --mantine-color-green-light | rgba(64, 192, 87, 0.15) | | --mantine-color-green-light-hover | rgba(64, 192, 87, 0.2) | | --mantine-color-green-light-color | var(--mantine-color-green-3) | | --mantine-color-green-outline | var(--mantine-color-green-4) | | --mantine-color-green-outline-hover | rgba(105, 219, 124, 0.05) | | --mantine-color-lime-text | var(--mantine-color-lime-4) | | --mantine-color-lime-filled | var(--mantine-color-lime-8) | | --mantine-color-lime-filled-hover | var(--mantine-color-lime-9) | | --mantine-color-lime-light | rgba(130, 201, 30, 0.15) | | --mantine-color-lime-light-hover | rgba(130, 201, 30, 0.2) | | --mantine-color-lime-light-color | var(--mantine-color-lime-3) | | --mantine-color-lime-outline | var(--mantine-color-lime-4) | | --mantine-color-lime-outline-hover | rgba(169, 227, 75, 0.05) | | --mantine-color-yellow-text | var(--mantine-color-yellow-4) | | --mantine-color-yellow-filled | var(--mantine-color-yellow-8) | | --mantine-color-yellow-filled-hover | var(--mantine-color-yellow-9) | | --mantine-color-yellow-light | rgba(250, 176, 5, 0.15) | | --mantine-color-yellow-light-hover | rgba(250, 176, 5, 0.2) | | --mantine-color-yellow-light-color | var(--mantine-color-yellow-3) | | --mantine-color-yellow-outline | var(--mantine-color-yellow-4) | | --mantine-color-yellow-outline-hover | rgba(255, 212, 59, 0.05) | | --mantine-color-orange-text | var(--mantine-color-orange-4) | | --mantine-color-orange-filled | var(--mantine-color-orange-8) | | --mantine-color-orange-filled-hover | var(--mantine-color-orange-9) | | --mantine-color-orange-light | rgba(253, 126, 20, 0.15) | | --mantine-color-orange-light-hover | rgba(253, 126, 20, 0.2) | | --mantine-color-orange-light-color | var(--mantine-color-orange-3) | | --mantine-color-orange-outline | var(--mantine-color-orange-4) | | --mantine-color-orange-outline-hover | rgba(255, 169, 77, 0.05) | ## Responsive Styles Responsive styles let you adjust the appearance of individual components, including font size, visibility, spacing, and colors, based on screen size. Category: Styling Note: If you are looking for how to structure app’s layout responsively, use components like [Grid](/components/grid) and [Group](/components/group), [Stack](/components/stack) and others. Check out the [Layout Overview](/layout-overview) section for tips on selecting the right layout components. ### Media Queries Resize the browser window to see the color changing between blue and red. ```python from dash import html component = html.Div("Demo", className="media-query-demo") ``` ```css .media-query-demo { background-color: var(--mantine-color-blue-filled); color: var(--mantine-color-white); padding: var(--mantine-spacing-md); text-align: center; @media (min-width: 48em) { background-color: var(--mantine-color-red-filled); } } ``` When choosing between pixels (px) and rems (rem or em) for media queries, it's generally recommended to use rems because they are relative to the user's font size, making your design more accessible and responsive to different browser zoom levels; whereas pixels are absolute and won't adjust with font size changes. Note that the rem unit is relative to the document's root element, while the em unit is relative to the immediate parent of the targeted element. In Mantine, breakpoints are expected to be set in em units to align with its contextual scaling approach. ### Configure breakpoints `theme.breakpoints` are used in all responsive Mantine components. Breakpoints are expected to be set in `em` units. You can configure these values in the [Theme Object](/theme-object) in the `MantineProvider`: You can customize the `breakpoints` defaults in the `theme`: ```python theme = { "breakpoints": { "xs": '30em', # customize breakpoints here "sm": '48em', "md": '64em', "lg": '74em', "xl": '90em', }, } dmc.MantineProvider( # your layout, theme=theme ) ``` ### Default `theme.breakpoints` Values | Breakpoint | Viewport width | Value in px | |------------|----------------|-------------| | xs | 36em | 576px | | sm | 48em | 768px | | md | 62em | 992px | | lg | 75em | 1200px | | xl | 88em | 1408px | ### hiddenFrom and visibleFrom props All Mantine components that have a root element support `hiddenFrom` and `visibleFrom` props. These props accept breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) and hide the component when viewport width is less than or greater than the specified breakpoint: ```python import dash_mantine_components as dmc component = dmc.Group( justify="center", children=[ dmc.Button( "Hidden from sm", hiddenFrom="sm", color="orange" ), dmc.Button( "Visible from sm", visibleFrom="sm", color="cyan" ), dmc.Button( "Visible from md", visibleFrom="md", color="pink" ) ] ) ``` ### Hidden and visible from as classes If you are building a component and want to use the same logic as in `hiddenFrom` and `visibleFrom` props but you do not want to use Mantine components, you can use` mantine-hidden-from-{x}` and `mantine-visible-from-{x}` classes. ```python html.Div("Hidden from md", className="mantine-hidden-from-md") html.Div("visible from xl", className="mantine-visible-from-xl") ``` ### Component size based on media query Some components support `size` prop, which changes various aspects of component appearance. `size` prop is not responsive – it is not possible to define different component sizes for different screen sizes. ### Container queries Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. Container queries are supported in all modern browsers. Note that CSS variables do not work in container queries and because of that rem scaling feature is not available. If you rely on this feature, it is better to define breakpoints in px units. ```python from dash import html import dash_mantine_components as dmc component = html.Div( className="container-query-demo-root", children=html.Div( "Resize parent element to see container query in action", className="container-query-demo-child" ) ) ``` Add the following to a .css file in /assets ```css .container-query-demo-root { min-width: 200px; max-width: 100%; min-height: 120px; container-type: inline-size; overflow: auto; resize: horizontal; border: solid; border-color: var(--mantine-color-default-border) } .container-query-demo-child { background-color: var(--mantine-color-dimmed); color: var(--mantine-color-white); padding: var(--mantine-spacing-md); @container (max-width: 500px) { background-color: var(--mantine-color-blue-filled); } @container (max-width: 300px) { background-color: var(--mantine-color-red-filled); } } ``` ### Responsive styles You can pass a dictionary to style props to add responsive styles with [style props](/style-props). Note that responsive style props are less performant than regular style props, it is not recommended using them in large amounts. ```python import dash_mantine_components as dmc component = dmc.Box( "Box with responsive style props", w={"base": 200, "sm": 400, "lg": 500}, py={"base": "xs", "sm": "md", "lg": "xl"}, bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"}, c="#fff", ta="center", mx="auto", ) ``` Responsive values are calculated the following way: - `base` value is used when none of the breakpoint values are provided - `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in `dmc.DEFAULT_THEME`. ```python import dash_mantine_components as dmc dmc.Box(w={ "base": 320, "sm": 480, "lg": 640 }) ``` In this case the element will have the following styles: ```css /* Base styles added to element and then get overwritten with responsive values */ .element { width: 20rem; } /* 48em is theme.breakpoints.sm by default */ @media (min-width: 48em) { .element { width: 30rem; } } /* 75em is theme.breakpoints.lg by default */ @media (min-width: 75em) { .element { width: 40rem; } } ``` ## Right-to-left direction All Mantine components support right-to-left direction out of the box. You can preview how components work with RTL direction by clicking direction control in the top right corner. Category: Styling ### DirectionProvider `DirectionProvider` component is used to set direction for all components inside it. It is required to wrap your application with `DirectionProvider` if you are planning to either use RTL direction or change direction dynamically. ```python app.layout=dmc.DirectionProvider( dmc.MantineProvider( # your layout ), direction="rtl", # or "ltr" id="direction-provider" ) ``` The `direction` prop sets the `dir` attribute on the root element of your application, the `html` element. ### RTL direction toggle You can change the text direction by updating the `direction` prop in a callback. Here is a minimal example of a RTL direction toggle, similar to the one used in the DMC documentation: ```python import dash_mantine_components as dmc from dash import Dash, Input, Output, State, callback from dash.exceptions import PreventUpdate from dash_iconify import DashIconify app = Dash() layout = dmc.Stack([ dmc.Group([ dmc.Title("RTL Direction demo", order=3), dmc.ActionIcon( DashIconify(icon="tabler:text-direction-rtl", width=18), id="rtl-toggle", variant="outline", ), ], justify="space-between"), dmc.Slider(value=25, labelAlwaysOn=True, mt="xl"), ], m="lg") app.layout = dmc.DirectionProvider( dmc.MantineProvider(layout), id="direction-provider", direction="ltr" ) @callback( Output("rtl-toggle", "children"), Output("direction-provider", "direction"), Input("rtl-toggle", "n_clicks"), State("direction-provider", "direction") ) def toggle_direction(n, d): if n is None: raise PreventUpdate new_dir = "ltr" if d == "rtl" else "rtl" return DashIconify(icon=f"tabler:text-direction-{d}", width=18), new_dir if __name__ == "__main__": app.run(debug=True) ``` ## Style Props With style props you can add responsive styles to any Mantine component that supports these props. Category: Styling ### Supported props Style props add styles to the root element, if you want to style nested elements use [Styles API](/styles-api) instead. ```python dmc.Box(mx="auto", maw=400, c="blue.6", bg="#fff") ``` :border: false ### Theme values Some style props can reference values from theme, for example `mt` will use `theme.spacing` value if you set `xs`, `sm`, `md`, `lg`, `xl`: ```python # margin-top: theme.spacing.xs dmc.Box(mt="xs") # margin-top: theme.spacing.md * -1 dmc.Box(mt="-md") # margin-top: auto dmc.Box(mt="auto") # margin-top: 1rem dmc.Box(mt=16) # margin-top: 5rem dmc.Box(mt="5rem") ``` In `c`, `bd` and `bg` props you can reference colors from `theme.colors`: ```python # Color: theme.colors.blue[theme.primaryShade] dmc.Box(c="blue") # Background: theme.colors.orange[1] dmc.Box(bg="orange.1") # Border: 1px solid theme.colors.red[6] dmc.Box(bd="1px solid red.6") # Color: if colorScheme is dark `var(--mantine-color-dark-2)`, if colorScheme is light `var(--mantine-color-gray-6)` dmc.Box(c="dimmed") # Color: if colorScheme is dark `var(--mantine-color-white)`, if colorScheme is light `var(--mantine-color-black)` dmc.Box(c="bright") # Background: #EDFEFF dmc.Box(bg="#EDFEFF") # Background: rgba(0, 34, 45, 0.6) dmc.Box(bg="rgba(0, 34, 45, 0.6)") ``` ### Responsive styles You can pass a dictionary to style props to add responsive styles with style props. Note that responsive style props are less performant than regular style props, it is not recommended using them in large amounts. ```python import dash_mantine_components as dmc component = dmc.Box( "Box with responsive style props", w={"base": 200, "sm": 400, "lg": 500}, py={"base": "xs", "sm": "md", "lg": "xl"}, bg={"base": "blue.7", "sm": "red.7", "lg": "green.7"}, c="#fff", ta="center", mx="auto", ) ``` Responsive values are calculated the following way: - `base` value is used when none of the breakpoint values are provided - `xs`, `sm`, `md`, `lg`, `xl` values are used when the viewport width is larger that the value of corresponding breakpoint specified in `dmc.DEFAULT_THEME`. ```python import dash_mantine_components as dmc dmc.Box(w={ "base": 320, "sm": 480, "lg": 640 }) ``` In this case the element will have the following styles: ```css /* Base styles added to element and then get overwritten with responsive values */ .element { width: 20rem; } /* 48em is theme.breakpoints.sm by default */ @media (min-width: 48em) { .element { width: 30rem; } } /* 75em is theme.breakpoints.lg by default */ @media (min-width: 75em) { .element { width: 40rem; } } ``` Note that underlying Mantine transforms `px` to `rem`, but for most part you can ignore this. ## Styles API With Styles API you can overwrite styles of inner elements in Mantine components with classNames or styles props. Category: Styling ### Styles API Overview DMC supports `style` and `className` props for styling the root element, just like other Dash libraries. However, many DMC components have nested elements. For example the `TextInput` includes `label`, `description`, `error` props. The Styles API is a set of props and techniques that allows you to customize the style of any element inside a Mantine component - inline using the `classNames` or `styles` props, or using the [Theme Object](/theme-object). ### Styles API Selectors Each component has its own set of selectors based on its structure. These are documented in the Styles API section of each component’s page. #### Example: `dmc.Button` Selectors | Name | Static selector | Description | | :------ | :---------------------- | :------------------------------- | | root | .mantine-Button-root | Root element | | loader | .mantine-Button-loader | Loader shown when `loading=True` | | section | .mantine-Button-section | Left and right icon sections | | inner | .mantine-Button-inner | Container for label and content | | label | .mantine-Button-label | The button’s text | You can use these selectors in multiple ways: #### 1) With `classNames` or `styles` props ```python # Using classNames dmc.Button( "Styled with classNames", classNames={ "root": "my-root-class", "label": "my-label-class", "inner": "my-inner-class", } ) # Using inline styles dmc.Button( "Styled with styles prop", styles={ "root": {"backgroundColor": "red"}, "label": {"color": "blue"}, "inner": {"fontSize": 20}, } ) ``` #### 2) In the `theme` prop in `MantineProvider` ```python theme = { "components": { "Button": { "classNames": { "root": "my-root-class", "label": "my-label-class", "inner": "my-inner-class", }, "styles": { "root": {"backgroundColor": "red"}, "label": {"color": "blue"}, "inner": {"fontSize": 20}, } } } } app.layout = dmc.MantineProvider( theme=theme, children=dmc.Button("Themed Button") ) ``` #### 3) In a `.css` file using static selectors ```css .mantine-Button-root { background-color: red; } .mantine-Button-label { color: blue; } .mantine-Button-inner { font-size: 20px; } ``` ### classNames Prop The `classNames` prop is used to apply custom CSS class names to specific inner elements of a Mantine component. It accepts a dictionary with element names as keys and classes as values. This approach is preferred for larger-scale styling and maintainability. ### Styles Prop The `styles` prop is used to apply inline styles directly to specific inner elements of a Mantine component. It accepts an dictionary where keys correspond to the names of the inner elements (as defined in the component's Styles API documentation) and values are style objects. Inline styles have higher specificity than classes, meaning they will override styles defined by classes unless `!important` is explicitly used in the class definition. You cannot use pseudo-classes (for example, `:hover`, `:first-of-type`) and media queries inside the `styles` prop. > styles prop usage > > Some examples and demos in the documentation use the `styles` prop for convenience, but it is not recommended to use the `styles` prop as the primary means of styling components, as the `classNames` prop is more flexible and has better performance. ### Avoid dynamic class names When inspecting elements in the browser, you may see generated class names like `m_77c9d27d`. These are internal to Mantine and can change between versions. Don’t target these in your CSS. Instead, use: * the `styles` or `classNames` props * static class selectors like `.mantine-Button-root` ### Global vs. Specific Styling You can combine global styling (via `theme` or static CSS) with component-specific overrides using `styles` or `classNames`. For example: * A default red background can be applied globally using `.mantine-Button-root` * A specific button can override this with its own `className` or `styles` Note: For components rendered in a portal — such as `Popover`, `Tooltip`, or `Modal` — static selectors often won’t work because parts of the DOM are rendered outside the main tree. In these cases, use `classNames` or `styles`, or set `withinPortal=False` if appropriate. ### Component Classes Mantine uses hashed class names (e.g., `m_77c9d27d`) for internal styling. These class names may change between versions or builds, so you should never rely on them directly. **Do not do this:** ```css /* This is fragile and will likely break */ .m_77c9d27d { background: blue; } ``` **Instead, do this:** ```css /* Use static selectors */ .mantine-Button-root { background: blue; } ``` Or: ```python # Use the Styles API dmc.Button( "Styled Button", classNames={"root": "my-custom-button"} ) ``` ### Data Attributes Many Mantine components use `data-*` attributes to reflect state or props. These can be useful for styling in CSS, especially when using features like loading states, icons, or layout modifiers. You’ll find a list of data attributes for each component in its Styles API docs. Example (`dmc.Button`): | Selector | Attribute | Set When… | Example value | | --------- | ------------------------ | -------------------- | ----------------- | | `root` | `data-disabled` | `disabled=True` | – | | `root` | `data-loading` | `loading=True` | – | | `root` | `data-block` | `fullWidth=True` | – | | `root` | `data-with-left-section` | `leftSection` is set | – | | `section` | `data-position` | Always | `left` or `right` | Example CSS targeting data attributes: ```css /* Style disabled buttons */ .dmc-data-attributes-demo[data-disabled="true"] { color: red; cursor: not-allowed; } /* Style buttons while loading */ .dmc-data-attributes-demo[data-loading="true"] { background-color: darkgray; } /* Style left icon section */ .dmc-data-attributes-demo .mantine-Button-section[data-position="left"] { color: var(--mantine-color-yellow-filled); } ``` ```python import dash_mantine_components as dmc from dash import html component = dmc.Group( [ dmc.Button("Default Button"), dmc.Button("Disabled Button", disabled=True, className="dmc-data-attributes-demo"), dmc.Button("Loading Button", loading=True, className="dmc-data-attributes-demo"), dmc.Button("Button with Left Section", leftSection=html.Div("left"), className="dmc-data-attributes-demo"), ], gap="sm" ) ``` ### attributes prop Use `attributes` prop to pass attributes to inner elements of all components that support Styles API. 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" }, }, ) ``` ### More Examples Here are a few component-specific examples. Refer to each component’s Styles API section for the full list of selectors and attributes. #### Button ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Button( "Settings", leftSection=DashIconify(icon="ic:baseline-settings-input-composite"), styles={"root": {"fontWeight": 400}, "section": {"width": 100}}, ) ``` #### Badge ```python import dash_mantine_components as dmc component = dmc.Badge( "Badge 1", variant="dot", styles={ "root": {"borderWidth": 1, "height": 30, "padding": 10}, "inner": {"fontWeight": 500}, }, ) ``` #### TextInput ```python import dash_mantine_components as dmc component = dmc.TextInput( label="TextInput with custom styles", placeholder="TextInput with custom styles", description="Description below the input", w=300, styles={ "input": {"borderColor": "var(--mantine-color-violet-4)"}, "label": { "color": "blue", "backgroundColor": "var(--mantine-color-yellow-1)", }, }, ) ``` ### Styles with Callbacks ```python from dash import html, callback, Output, Input, State import dash_mantine_components as dmc component = html.Div([ dmc.TextInput( id="styles-input", label="Required Input", required=True, ), dmc.Button("Submit", id="styles-submit-btn") ]) @callback( Output("styles-input", "styles"), Input("styles-submit-btn", "n_clicks"), State("styles-input", "value"), prevent_initial_call=True ) def update_styles(n_clicks, value): if not value: return { "input": {"borderColor": "red"}, "label": {"color": "red"} } return { "input": {"borderColor": "green"}, "label": {"color": "green"} } ``` ### Slider See the [Styling the Slider](/components/slider#styling-the-slider) section for a detailed example including: * Dynamic theming with `light-dark` * Custom styling for tracks, marks, and thumbs * Attribute-based styling using `[data-filled]` ### Tabs For another advanced example, see the [Styling the Tabs](/components/tabs#styling-the-tabs) section. ### DatePickerInput Components that use portals (like `Popover`, `Modal`, and `Tooltip`) often render outside the DOM tree. To style their internal parts: * Use `classNames` or `styles` props * Or set `withinPortal=False` if supported ```python import dash_mantine_components as dmc component = dmc.Stack([ dmc.DatePickerInput( label="Default Calendar style" ), dmc.DatePickerInput( label="Calendar without red weekend days", styles={"day": {"color": "var(--mantine-color-text)"}}, ) ]) ``` ## Styles Overview This guide will help you understand how to apply styles to Dash Mantine components. Category: Styling ### Component specific props Most of the components provide props that allow you to customize their styles. For example, `Button` component has `color`, `variant`, `size` and `radius` props that control its appearance: ### Style props [Style props](/style-props) work similar to component specific props, but with several differences: - Style props are not component specific, they can be used with any component. - Style props always control a single CSS property. For example, `c` prop controls CSS `color` property, while `color` prop controls a set of properties: `color`, `background-color` and `border-color`. - Style props are set in style attribute. It is not possible to override them with CSS without using `!important`. [Style props](/style-props) are useful when you need to change a single CSS property without creating a separate file for styles. Some of the most common use cases are: - Changing text color and font-size ```python dmc.Card([ dmc.Text("Card title", c="blue.8", fz="lg"), dmc.Text("Card description", c="dimmed", fz="sm") ]) ``` - Applying margins to inputs inside a form: ```python dmc.Paper([ dmc.TextInput(label="First name"), dmc.TextInput(label="Last name", mt="md"), dmc.TextInput(label="Email", mt="md") ]) ``` - Adding padding to various elements: ```python dmc.Paper("My custom card", p="xl") ``` Note that style props were never intended to be used as a primary way of styling components. In most cases, it is better to limit the number of style props used per component to 3-4. If you find yourself using more than 4 style props, consider creating a separate CSS file with styles – it will be easier to maintain and will be more performant. ### style prop You can use the `style` prop to define inline styles, just like in other dash components: ```python dmc.Card(style={"backgroundColor": "blue", "color": "white"}) ``` ### className prop You can define CSS classes in a `.css` file in the `/assets` folder. These can then be referenced using the `className` prop, just like in other dash components: ```python dmc.Card(className="card-style") ``` .css file: ```css .card-style { background-color: blue; color: white; } ``` ### Styles API Note that the `style` and the `className` props will apply style to the root of the component. Many DMC components contain multiple elements, for example the `TextInput` includes `label`, `description`, `error` props. Use the `classNames` or `styles` props to target the nested elements. See more information in the [StylesAPI](/styles-api) section. - `styles` prop: Used to apply inline styles directly to specific inner elements of a Mantine component. - `classNames`prop: Used to apply custom CSS class names to specific inner elements of a Mantine component ### theme prop in MantineProvider DMC includes a great default theme that supports light and dark mode. Use the `theme` prop to change the global styles. For those of you familiar with Dash Bootstrap Components, this is similar to setting the theme using a Bootstrap stylesheet. However, in DMC, instead of linking to a CSS file, you can directly define the theme using a Python dictionary, which makes it easy to customize the theme. For example, you can override colors, fonts, spacing, and even component-specific styles globally. For more information see the [Theme Object](/theme-object) section. ### Theme Tokens A theme token is a named value from the global theme, like a color, spacing unit, or font family. In DMC, these tokens can be used in any styles with the Mantine [CSS variables](/css-variables): For example: - In a `.css` file in `/assets`: ```css .root { background: var(--mantine-color-red-5); /* red[5] from theme.colors */ margin-top: var(--mantine-spacing-md); /* md from theme.spacing */ } ``` - In style props: ```python dcc.Box(bg="red.5", mt="xl") # Shorthand for: var(--mantine-color-red-5), var(--mantine-spacing-xl) ``` - In the `style` prop: ```python dcc.Box(style={"backgroundColor": "var(--mantine-color-red-5)"}) ``` ## Colors How to use colors with Dash Mantine Components. Category: Theming Mantine uses [open-color](https://yeun.github.io/open-color/) in default theme with some additions. Each color has 10 shades. ### Colors in the default theme Colors are stored in the [theme object](/theme-object) as an array of strings. Each color is indexed from `0` (lightest) to `9` (darkest). The default theme is available as `dmc.DEFAULT_THEME`, which contains all theme properties with their default values. For example, access a specific shade by using the color name and index: `dmc.DEFAULT_THEME['colors']['blue'][1]` Colors with larger indices are darker. ```python import dash_mantine_components as dmc from dash import html component = html.Div( " This is a blue element", style={ "backgroundColor": dmc.DEFAULT_THEME["colors"]["blue"][1], "color": dmc.DEFAULT_THEME["colors"]["blue"][9], "padding": dmc.DEFAULT_THEME["spacing"]["lg"] } ) ``` When using the `color` or other style props like `c`, `bd` or `bg` prop, you can use just the color.index: ```python import dash_mantine_components as dmc component = dmc.Group([ dmc.Button("Button", color="blue.3"), dmc.Button("Button", variant="light", color="blue.3"), dmc.Button("Button", variant="outline", color="blue.3") ]) ``` ### Colors as CSS Variables Mantine also exposes colors as CSS variables. A complete list of Mantine CSS variables is available in the [Mantine Docs](https://mantine.dev/styles/css-variables-list/). If you define custom colors in the `theme` object (via the `MantineProvider` component), these will also be included as CSS variables. ```python import dash_mantine_components as dmc from dash import html component = html.Div( " This is a blue theme", style={ "backgroundColor": "var(--mantine-color-blue-1)", "color": "var(--mantine-color-blue-9)", "padding": "var(--mantine-spacing-lg)", } ) ``` ### Adding extra colors You can add any number of extra colors to `theme.colors` object. This will allow you to use them in all components that support color prop, for example `Button`, `Badge` and `Switch`. ```python import dash_mantine_components as dmc dmc.MantineProvider( theme={ "colors": { "myColor": [ "#F2FFB6", "#DCF97E", "#C3E35B", "#AAC944", "#98BC20", "#86AC09", "#78A000", "#668B00", "#547200", "#455D00", ] }, }, children=[dmc.Button("Custom Colors!", color="myColor")], ) ``` ### Changing colors You can override named theme colors as well, by providing your own list of 10 colors ```python dmc.MantineProvider( theme={ "colors": { "blue": [... ] # your 10 colors for "blue" theme color } } ) ``` > 10 shades per color > > Colors override must include at least 10 shades per color. Otherwise, you will get a TypeScript error and some > variants will not have proper colors. If you only have one color value, you can either pick the remaining colors > manually or use the [colors generator tool](https://mantine.dev/colors-generator/). > > You can add more than 10 shades per color: these values will not be used by Mantine components with the default > colors resolver, but you can still reference them by index, for example, color="blue.11". ### Supported color formats You can use the following color formats in theme.colors: - HEX: `#fff`, `#ffffff` - RGB: `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.5)` - HSL: `hsl(0, 0%, 100%)`, `hsla(0, 0%, 100%, 0.5)` - OKLCH: `oklch(96.27% 0.0217 238.66)`, `oklch(96.27% 0.0217 238.66 / 0.5)` ### Changing Theme Object defaults You can change the defaults for `primaryColor` and `primaryShade` in the [theme object](/theme-object) in the `MantineProvider` component. #### primaryColor The value of `theme.primaryColor` must be defined as key of `theme.colors`, it is used: - As a default value for most of the components that support color prop - To set default focus ring outline color You can customize the primary color by changing it from its default value of `blue` to another predefined theme color. This example changed the default primary color to `green`: ```python dmc.MantineProvider( theme={"primaryColor": "green"}, children=[] # your layout here ) ``` > Note You cannot assign CSS color values to `defaultColor` It must be a defined color in the `theme` object. #### primaryShade `theme.primaryShade` is a number from 0 to 9. It determines which shade will be used for the components that have color prop. ```python dmc.MantineProvider( theme={"primaryShade": 3}, children=dmc.Group([ dmc.Button("Button",), dmc.Button("Button", variant="light"), dmc.Button("Button", variant="outline") ]) ) ``` You can also customize primary shade for dark and light color schemes separately (This is the default): ```python dmc.MantineProvider( theme={"primaryShade": { "light": 6, "dark": 8 }}, children=[] # your layout here ) ``` ### Color prop Components that support changing their color have color prop. This prop supports the following values: - Key of `theme.colors`, for example, `blue` or `green` - Key of `theme.colors` with color index, for example, `blue.5` or `green.9` - CSS color value, for example, #fff or rgba(0, 0, 0, 0.5) ```python import dash_mantine_components as dmc component= dmc.Box([ dmc.Text("Filled variant", size="sm", mb=5, fw=500), dmc.Group([ dmc.Button("Theme color", color="cyan"), dmc.Button("Hex color", color="#1D72FE") ]), dmc.Text("Light variant", size="sm", mb=5, mt="md", fw=500), dmc.Group([ dmc.Button("Theme color", variant="light", color="cyan"), dmc.Button("Hex color", variant="light", color="#1D72FE") ]), dmc.Text("Outline variant", size="sm", mb=5, mt="md", fw=500), dmc.Group([ dmc.Button("Theme color", variant="outline", color="cyan"), dmc.Button("Hex color", variant="outline", color="#1D72FE") ]) ]) ``` ### Colors index reference You can reference colors by index in `color` prop and style props, for example `c` prop: ```python dmc.Text("Text with blue.5 color", c="blue.5") dmc.Button("Button", color="blue.5") ``` ### Difference between color and c props `color` prop is used to control multiple CSS properties of the component. These properties can vary across different components, but usually `color` prop controls `background`, `color` and `border-color` CSS properties. For example, when you set `color='#C3FF36'` on `Button` component (with `variant='filled'`), it will set the following CSS properties: - `background-color` to `#C3FF36` - `background-color` when button is hovered to `#B0E631` (`#C3FF36` darkened by 10%) - color to `var(--mantine-color-white)` - `border-color` to `transparent` `c` is a [style prop](/style-props) – it is responsible for setting a single CSS property `color` (color of the text). You can combine both props to achieve better contrast between text and background. In the following example: - `color` prop sets all background: #C3FF36 and color: `var(--mantine-color-white)` - `c` prop overrides color styles to `color: var(--mantine-color-black)` ```python import dash_mantine_components as dmc component = dmc.Button("Button with color and c props", color="#C3FF36", c="black") ``` ### Colors in light and dark mode #### Using light-dark() CSS Function The [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function allows defining different styles for light and dark color schemes. ```css background-color: light-dark(white, black); ``` - The first argument applies in light mode. - The second argument applies in dark mode. Note that the light-dark() function is not supported in older browsers. ```python import dash_mantine_components as dmc component = dmc.Box([ dmc.Text( "Click the theme switch in the header to see how the background changes in different modes:" ), # Using CSS color names dmc.Text( "light-dark(whitesmoke, gray)", style={"backgroundColor": "light-dark(whitesmoke, gray)"}, p="lg", m="md" ), # Using Mantine CSS variables dmc.Text( "light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9))", style={"backgroundColor": "light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9))"}, p="lg", m="md" ) ]) ``` #### CSS Class Names for Light/Dark Mode Since light-dark() is not supported in older browsers, you can use class-based styling instead: ```python import dash_mantine_components as dmc component = dmc.Box([ dmc.Text( "Click the theme switch in the header to see how the background changes in different modes" ), dmc.Text( "CSS class defined for light and dark scheme", className="light-dark-demo", p="lg", m="md" ), ]) ``` ```css /* applied in light color-scheme */ .light-dark-demo { background-color: #ffec99 } /* applied in dark color-scheme */ [data-mantine-color-scheme='dark'] .light-dark-demo { background-color: #ff6b6b } /* You can also use mantine colors .light-dark-demo { background-color: var(--mantine-color-blue-1) } [data-mantine-color-scheme='dark'] .light-dark-demo { background-color: var(--mantine-color-blue-1) */ ``` #### CSS Variables for Light/Dark Mode Defining CSS variables on the `:root` element allows global styling across your app, including the `body` element. Here is an example using a CSS variable: ```python import dash_mantine_components as dmc component = dmc.Box([ dmc.Text( "Click the theme switch in the header to see how the background changes in different modes:" ), dmc.Text( "CSS variable defined for light and dark scheme", style={"backgroundColor": "var(--my-light-dark-colors"}, p="lg", m="md" ), ]) ``` ```css :root { --my-light-dark-colors: aliceblue; } :root[data-mantine-color-scheme="dark"] { --my-light-dark-colors: blue; } /* You can also use mantine colors :root { --my-light-dark-colors: var(--mantine-color-blue-1); } :root[data-mantine-color-scheme="dark"] { --my-light-dark-colors: var(--mantine-color-blue-1); } */ /* The --mantine-color-body CSS variable is used for body background and as background color of some components (Modal, Paper, etc.). You can change it like this: :root { --mantine-color-body: #f9f9f9; } :root[data-mantine-color-scheme="dark"] { --mantine-color-body: #333; } */ ``` ### Default colors ```python import dash_mantine_components as dmc colors = dmc.DEFAULT_THEME["colors"] component= dmc.SimpleGrid([ dmc.Card([ dmc.Box(h=100, w=100, bg=f"{c}.{i}" ), dmc.Text(f"{c} {i}", size="sm"), dmc.Text(f"{colors[c][i]}", size="sm", c="dimmed") ]) for c in list(colors) for i in range(10) ], cols={ "base": 5, "lg": 10 }, spacing="xs") ``` ### Default colors: CSS Variables list For a list of all Mantine CSS variables that are generated from default theme, see the [CSS Variables](/css-variables/) section. ## MantineProvider Use MantineProvider component to manage themes in your app globally. Category: Theming Wrap your `app.layout` with a single `MantineProvider` to enable theming and styling features across your app. There should only be one `MantineProvider` in your app. The `MantineProvider`: 1. Sets the global theme, including colors, spacing, and fonts. 2. Handles light and dark mode toggling. 3. Provides Mantine CSS variables according to the selected theme. ### Usage Your app must be wrapped inside a MantineProvider, and it must be used only once. ```python import dash_mantine_components as dmc app.layout = dmc.MantineProvider( theme = {...}, children={...} ) ``` ### Theme object See the [Theme Object](/theme-object) section to learn how to customize the default Mantine theme. ### Custom Colors See the [Colors](/colors) section to learn how to customize the theme colors. ### Light and Dark Color Schemes Mantine supports both light and dark color schemes. The default color scheme is "light". When the `MantineProvider` is added to your app, it automatically sets the `data-mantine-color-scheme` attribute at the top level of the app. This attribute controls whether the app uses light or dark mode. All components in the app reference this attribute to decide which colors to apply. You can change the color scheme with the `forceColorScheme` prop. In the [Theme Switch Components](/theme-switch) section, learn how to add a component to allow users to select either light or dark mode. ```python import dash_mantine_components as dmc app.layout = dmc.MantineProvider( forceColorScheme="dark", theme = {...}, children={...} ) ``` ### Keyword Arguments #### MantineProvider - children (a list of or a singular dash component, string or number; optional): Your application. - id (string; optional): Unique ID to identify this component in Dash callbacks. - classNamesPrefix (string; optional): A prefix for components static classes (for example {selector}-Text-root), `mantine` by default. - colorSchemeManager (dict; optional): Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage`. `colorSchemeManager` is a dict with keys: - cssVariablesResolver (dict; optional): Function to generate CSS variables based on theme object. `cssVariablesResolver` is a dict with keys: - cssVariablesSelector (string; optional): CSS selector to which CSS variables should be added, by default variables are applied to `:root` and `:host`. - deduplicateCssVariables (boolean; optional): Determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime. @,default,`True`. - defaultColorScheme (a value equal to: 'auto', 'dark', 'light'; optional): Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `light` by default. - env (a value equal to: 'default', 'test'; optional): Environment at which the provider is used, `'test'` environment disables all transitions and portals. - forceColorScheme (a value equal to: 'dark', 'light'; optional): Forces color scheme value, if set, MantineProvider ignores `colorSchemeManager` and `defaultColorScheme`. - stylesTransform (dict; optional): An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries. `stylesTransform` is a dict with keys: - theme (dict; optional): Theme override object. `theme` is a dict with keys: - withCssVariables (boolean; optional): Determines whether theme CSS variables should be added to given `cssVariablesSelector` @,default,`True`. - withGlobalClasses (boolean; optional): Determines whether global classes should be added with `` tag. Global classes are required for `hiddenFrom`/`visibleFrom` and `lightHidden`/`darkHidden` props to work. @,default,`True`. - withStaticClasses (boolean; optional): Determines whether components should have static classes, for example, `mantine-Button-root`. @,default,`True`. ## Plotly figure templates How to style Plotly figures with a Mantine theme. Category: Theming --- ### Plotly Figure Template Basics Plotly figure templates allow you to style your figures globally or per-figure. Templates include pre-defined color schemes, font styles, and layout configurations. For more details, refer to the [Plotly templates documentation](https://plotly.com/python/templates/). Below is an example using Plotly's built-in `plotly_white` and `plotly_dark` templates. This is the same figure styled for a light and dark theme. ```python import dash_mantine_components as dmc from dash import dcc import plotly.express as px df = px.data.gapminder() dff = df[df.year == 2007] component = dmc.SimpleGrid( [ dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="plotly_white", title="plotly_white theme")), dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="plotly_dark", title="plotly_dark theme")) ], cols=2 ) ``` ### Mantine-Themed Plotly Templates To make Plotly figures consistent with Mantine's default theme, Dash Mantine Components provides two custom Plotly templates: - **`mantine_light`**: Based on `plotly_white` and styled with Mantine's light theme. - **`mantine_dark`**: Based on `plotly_dark` and styled with Mantine's dark theme. These templates are created and registered using the `add_figure_templates` function. They include: - Color palettes from Mantine’s theme. - Fonts (`Inter` by default). - Background and grid colors that match Mantine’s styles. ```python import dash_mantine_components as dmc from dash import dcc import plotly.express as px df = px.data.gapminder() dff = df[df.year == 2007] dmc.add_figure_templates() component = dmc.SimpleGrid( [ dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="mantine_light", title="mantine_light theme" )), dcc.Graph(figure=px.bar(dff, x="continent", y="pop", template="mantine_dark", title="mantine_dark theme")) ], cols=2 ) ``` ### Setting a Default Template You can globally set either `mantine_light` or `mantine_dark` as the default Plotly template. This ensures all figures use the specified template unless explicitly overridden. ```python import dash_mantine_components as dmc # Set "mantine_dark" as the default template dmc.add_figure_templates(default="mantine_dark") ``` ### Modifying Existing Plotly Templates The `mantine_light` and `mantine_dark` templates can be customized like any other Plotly template. Refer to the [Plotly templates documentation](https://plotly.com/python/templates/) for more info and examples. ```python import plotly.io as pio import plotly.express as px import dash_mantine_components as dmc dmc.add_figure_templates() # Access the registered Mantine light template template = pio.templates["mantine_light"] # Reduce the margins in the template template.layout.margin = dict(l=20, r=20, t=20, b=20) fig = px.scatter(px.data.gapminder(), x="gdpPercap", y="lifeExp", template="mantine_light") ``` ### Customizing `add_figure_templates` Function The `add_figure_templates` function is available starting in DMC version 0.15.1. If you are using an earlier version, or if you are using a custom Mantine theme, you can include your own `add_figure_templates` implementation in your project. Example Project Structure: ```bash my_project/ ├── app.py ├── my_figure_templates.py ``` In `my_figure_templates.py`: Copy the `add_figure_templates` code from the [Dash Mantine Components GitHub](https://github.com/snehilvj/dash-mantine-components/blob/master/dash_mantine_components/figure_templates.py) repository and modify it to fit your project's requirements. In `app.py`: ```python from my_figure_templates import add_figure_templates # Register custom templates add_figure_templates() ``` In the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates_custom) you'll find a complete minimal example of a custom figure template with a green primary color. ### Using a Theme Switcher To update the figure when switching themes, you need to change the Plotly template in a callback. > For more information on adding a theme switcher to your app, check the [Theme Switch Component](/theme-switch) section. The example below uses this app's theme switch component in the callback. Try it out by clicking the **theme switch** in the header! See a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates_simple) ```python import dash_mantine_components as dmc from dash import dcc, Input, Output, callback import plotly.express as px df = px.data.gapminder() dff = df[df.year == 2007] dmc.add_figure_templates() # Theme switch in the dmc-docs header: # dmc.ColorSchemeToggle( # lightIcon=DashIconify(icon="radix-icons:sun", width=20), # darkIcon=DashIconify(icon="radix-icons:moon", width=20), # variant="light", # color="gray", # id="docs-color-scheme-switch", # ) component = dcc.Graph(id="figure-templates-histogram") @callback( Output("figure-templates-histogram", "figure"), Input("docs-color-scheme-switch", "computedColorScheme"), ) def update_figure(color): template = "mantine_dark" if color=="dark" else "mantine_light" return px.bar(dff, x="continent", y="pop", title="Population by Continent", template=template) ``` For better performance, you can update the figure template using [Partial Property Updates.](https://dash.plotly.com/partial-properties) Here is the callback updated to use `Patch` to change the figure template. Note that when using `Patch` you must use the template object rather than just the string name. ```python from dash import Input, Output, callback, Patch import plotly.io as pio @callback( Output("figure-templates-bar", "figure"), Input("docs-color-scheme-switch", "computedColorScheme"), ) def update_figure(color): # template must be template object rather than just the template string name template = pio.templates["mantine_dark"] if color=="dark" else pio.templates["mantine_light"] patched_fig = Patch() patched_fig["layout"]["template"] = template return patched_fig ``` ### Updating multiple figures To update multiple figure when switching themes, you can use [Pattern Matching Callbacks.](https://dash.plotly.com/pattern-matching-callbacks) The example below uses this app's theme switch component in the callback. Try it out by clicking the **theme switch** in the header! See a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/tree/main/help_center/theme_switch_figure_templates) ```python import dash_mantine_components as dmc from dash import dcc, Input, Output, State, callback, Patch, ALL import plotly.express as px import plotly.io as pio dmc.add_figure_templates(default="mantine_light") df = px.data.gapminder() line_fig = px.line( df.query("1952 <= year <= 1982 & continent != 'Asia'"), x="year", y="gdpPercap", color="continent", line_group="country" ) dff = df[df.year == 2007] scatter_fig = px.scatter( dff, x="gdpPercap", y="lifeExp", size="pop", color="continent", log_x=True, size_max=60, title=f"2007 GDP per Capita vs Life Expectancy, Sized by Population ", ) avg_lifeExp = (dff["lifeExp"] * dff["pop"]).sum() / dff["pop"].sum() map_fig = px.choropleth( dff, locations="iso_alpha", color="lifeExp", title="%.0f World Average Life Expectancy was %.1f years" % (2007, avg_lifeExp), ) bar_fig = px.bar(dff, x="continent", y="pop", title="Population by Continent") graphs = dmc.Grid( [ dmc.GridCol(dcc.Graph(figure=bar_fig, id={"type": "graph", "index": "bar"}), span={"base": 12, "md":6}), dmc.GridCol(dcc.Graph(figure=scatter_fig, id={"type": "graph", "index": "scatter"}), span={"base": 12, "md":6}), dmc.GridCol(dcc.Graph(figure=line_fig, id={"type": "graph", "index": "line"}), span={"base": 12, "md":6}), dmc.GridCol(dcc.Graph(figure=map_fig, id={"type": "graph", "index": "map"}), span={"base": 12, "md":6}), ], gutter="xl", ) sample_controls = dmc.Box([ dmc.Button("sample button"), dmc.Button("sample red button", color="red"), dmc.Button("sample yellow button", color="yellow"), dmc.Slider(value=25, my="lg"), ], w=600) # used in the children prop of MantinePovider([], id="m2d-mantine-provider) component = dmc.Box([sample_controls, graphs]) @callback( Output({"type": "graph", "index": ALL}, "figure"), Input("docs-color-scheme-switch", "computedColorScheme"), State({"type": "graph", "index": ALL}, "id"), ) def update_figure(color, ids): # template must be template object rather than just the template string name template = pio.templates["mantine_dark"] if color=="dark" else pio.templates["mantine_light"] patched_figures = [] for i in ids: patched_fig = Patch() patched_fig["layout"]["template"] = template patched_figures.append(patched_fig) return patched_figures ``` ## Theme Object Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored. Category: Theming ### Theme overview Mantine’s default theme makes Dash apps look great in both light and dark modes. If you’re new to Dash Mantine Components, start with the default theme. You can customize the theme globally by editing the `theme` prop in the `MantineProvider`. The `theme` object is a dictionary where you can set things like colors, border radius, spacing, fonts, and breakpoints. Mantine will merge your custom theme with the defaults, so you just need to provide what you want to change. This example demonstrates how changing the `theme` updates the entire app’s appearance. Here, we change: - Primary accent color - Border radius - Card shadow style - Color scheme (light/dark) Try it live: [DMC Theme Builder on Pycafe](https://py.cafe/app/dash.mantine.components/dash-mantine-theme-builder) --- --- ### Usage ```python import dash_mantine_components as dmc dmc.MantineProvider( theme={ # add your colors "colors": { # add your colors "deepBlue": ["#E9EDFC", "#C1CCF6", "#99ABF0" "..."], # 10 colors # or replace default theme color "blue": ["#E9EDFC", "#C1CCF6", "#99ABF0" "..."], # 10 colors }, "shadows": { # other shadows (xs, sm, lg) will be merged from default theme "md": "1px 1px 3px rgba(0,0,0,.25)", "xl": "5px 5px 3px rgba(0,0,0,.25)", }, "headings": { "fontFamily": "Roboto, sans-serif", "sizes": { "h1": {"fontSize": '30px'}, }, }, }, children=[ # your app layout here ], ) ``` ### Theme properties You can find a complete list of all theme properties in the theme object in the references section at the bottom of the page. In the next section, we’ll focus on a few key properties to explain them in more detail. #### Colors See more information and examples in [Colors](/colors) section - `colors` adds colors or over-rides named theme colors - `primaryColor` sets the app's primary (default) accent color - `primaryShade` sets the app's primary shade in either light or dark mode #### Typography See more information and examples in [Typography](/typography) section - `fontFamily` – controls font-family in all components except `Title`, `Code` and `Kbd` - `fontFamilyMonospace` – controls font-family of components that require monospace font: `Code`, `Kbd` and `CodeHighlight` - `headings.fontFamily` – controls font-family of h1-h6 tags in `Title`, fallbacks to `theme.fontFamily` if not defined - `fontSizes` - defines the font-size from `xs` to `xl` - `lineHeights` -defines `line-height` values for `Text` component, most other components use `theme.lineHeights.md` by default #### Breakpoints See more information and examples in [Responsive Styles](/responsive-styles) section #### autoContrast `autoContrast` controls whether text color should be changed based on the given color prop in the following components: * `ActionIcon` with `variant='filled'` only * `Alert` with `variant='filled'` only * `Avatar` with `variant='filled'` only * `Badge` with `variant='filled'` only * `Button` with `variant='filled'` only * `Chip` with `variant='filled'` only * `NavLink` with `variant='filled'` only * `ThemeIcon` with `variant='filled'` only * `Checkbox` with `variant='filled'` only * `Radio` with `variant='filled'` only * `Tabs` with `variant='filled'` only * `SegmentedControl` * `Stepper` * `Pagination` * `Progress` * `Indicator` * `Timeline` * `Spotlight` * All dates components that are based on Calendar component `autoContrast` checks whether the given color luminosity is above or below the `luminanceThreshold` value and changes text color to either `theme.white` or `theme.black` accordingly. `autoContrast` can be set globally on the theme level or individually for each component via `autoContrast` prop, except for dates components which only support global theme setting. ```python import dash_mantine_components as dmc component = dmc.Box([ dmc.Code("autoContrast=True"), dmc.Group( [ dmc.Button("Lime.4 button", color="lime.4", autoContrast=True), dmc.Button("Blue.2 button", color="blue.2", autoContrast=True), dmc.Button("Orange.3 button", color="orange.3", autoContrast=True), ], mt="xs", mb="lg" ), dmc.Code("autoContrast=False"), dmc.Group( [ dmc.Button("Lime.4 button", color="lime.4"), dmc.Button("Blue.2 button", color="blue.2"), dmc.Button("Orange.3 button", color="orange.3"), ], mt="xs" ) ]) ``` #### luminanceThreshold `luminanceThreshold` controls which luminance value is used to determine if text color should be light or dark. It is used only if `theme.autoContrast` is set to `True`. Default value is 0.3. See a live demo of `luminanceThreshold` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#luminancethreshold) ```python dmc.MantineProvider( dmc.Group([ dmc.Button("button", color=f"blue.{i}") for i in range(10) ]), theme={ "luminanceThreshold": .45, "autoContrast": True } ) ``` #### focusRing `theme.focusRing` controls focus ring styles, it supports the following values: - 'auto' (default and recommended) – focus ring is visible only when the user navigates with keyboard, this is the default browser behavior for native interactive elements - 'always' – focus ring is visible when user navigates with keyboard and mouse, for example, the focus ring will be visible when user clicks on a button - 'never' – focus ring is always hidden, it is not recommended – users who navigate with keyboard will not have visual indication of the current focused element See a live demo of `focusRing` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#focusring) #### focusClassName `theme.focusClassName` is a CSS class that is added to elements that have focus styles, for example, `Button` or `ActionIcon`. It can be used to customize focus ring styles of all interactive components except inputs. Note that when `theme.focusClassName` is set, `theme.focusRing` is ignored. See a live demo of `focusClassName` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#focusclassname) ```python dmc.MantineProvider( dmc.Button("click button to see focus ring", m="lg"), theme={"focusClassName": "focus"} ) ``` Define the class in the `.css` file in `/assets` folder ```css /* Use `&:focus` when you want focus ring to be visible when control is clicked */ .focus { &:focus { outline: 2px solid var(--mantine-color-red-filled); outline-offset: 3px; } } ``` #### activeClassName `theme.activeClassName` is a CSS class that is added to elements that have active styles, for example, `Button` or `ActionIcon`. It can be used to customize active styles of all interactive components. To disable active styles for all components, set `theme.activeClassName` to an empty string. See a live demo of `activeClassName` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#activeclassname) #### defaultRadius `theme.defaultRadius` controls the default border-radius property in most components, for example, `Button` or `TextInput`. You can set to either one of the values from `theme.radius` or a number/string to use exact value. Note that numbers are treated as pixels, but converted to rem. For example, `{'defaultRadius': 4}` will be converted to 0.25rem. You can learn more about rem conversion in the [rem units guide](https://mantine.dev/styles/rem/). See a live demo of `defaultRadius` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#defaultradius) ```python dmc.MantineProvider( dmc.Box([ dmc.Button("Button", m="sm"), dmc.TextInput(m="sm", label="TextInput with defaultRadius", placeholder="TextInput with default radius") ]), theme={"defaultRadius": "xl"}, ) ``` #### cursorType `theme.cursorType` controls the default cursor type for interactive elements, that do not have cursor: pointer styles by default. For example, `Checkbox`. See a live demo of `cursorType` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#cursortype) ```python dmc.MantineProvider( dmc.Checkbox(label="Pointer cursor", mt="md"), theme={"cursorType": 'pointer'}, ) ``` #### defaultGradient `theme.defaultGradient` controls the default gradient configuration for components that support `variant='gradient'` (Button, ActionIcon, Badge, etc.). See a live demo of `defaultGradient` in the [Mantine Docs](https://mantine.dev/theming/theme-object/#defaultgradient) ```python dmc.MantineProvider( dmc.Button("Button with custom default gradient", variant="gradient"), theme={ "defaultGradient": { "from": 'orange', "to": 'red', "deg": 45, }, } ) ``` #### components defaultProps Default props You can define default props for every Mantine component by setting `theme.components`. These props will be used by default by all components of your application unless they are overridden by component props. See a live demo of `defaultProps` in the [Mantine Docs](https://mantine.dev/theming/default-props/) ```python dmc.MantineProvider( dmc.Group( [ dmc.Button("Default button"), dmc.Button("Button with props", color="red", variant="filled"), ] ), theme={ "components": { "Button": { "defaultProps": { "color": "cyan", "variant": "outline", }, }, }, } ) ``` #### components custom variants See how to add custom variants to `ActionIcon` and `Button` in the theme object, making these variants available globally across your app. Detailed examples are provided in their respective documentation sections. Also, see examples live: - [Live Demo: Button Variants on PyCafe](https://py.cafe/dash.mantine.components/button-custom-variants-demo-0) - [Live Demo: ActionIcon Variants on PyCafe](https://py.cafe/dash.mantine.components/actionicon-custom-variants-demo) #### components custom sizes See and example of adding custom sizes in the [Checkbox](/components/checkbox) section. Also see a live dome on PyCafe: - [Live Demo: Checkbox Sizes PyCafe](https://py.cafe/dash.mantine.components/checkbox-custom-sizes-demo) #### other `theme.other` is an object that can be used to store any other properties that you want to access with the theme objects. ```python dmc.MantineProvider( # your app layout, theme={ "other": { "charcoal": "#333333", "primaryHeadingSize": 45, "fontWeights": { "bold": 700, "extraBold": 900, }, }, } ) ``` ### Usage in DMC docs MantineProvider is used to customize theme for these docs as well. The theming is more or less inline with below. ```python import dash_mantine_components as dmc app.layout = dmc.MantineProvider( forceColorScheme="light", theme={ "primaryColor": "indigo", "fontFamily": "'Inter', sans-serif", "components": { "Button": {"defaultProps": {"fw": 400}}, "Alert": {"styles": {"title": {"fontWeight": 500}}}, "AvatarGroup": {"styles": {"truncated": {"fontWeight": 500}}}, "Badge": {"styles": {"root": {"fontWeight": 500}}}, "Progress": {"styles": {"label": {"fontWeight": 500}}}, "RingProgress": {"styles": {"label": {"fontWeight": 500}}}, "CodeHighlightTabs": {"styles": {"file": {"padding": 12}}}, "Table": { "defaultProps": { "highlightOnHover": True, "withTableBorder": True, "verticalSpacing": "sm", "horizontalSpacing": "md", } }, }, }, children=[ # content ], ) ``` ### Default theme Default theme is available as `dmc.DEFAULT_THEME`. It includes all theme properties with default values. When you pass theme override to MantineProvider, it will be deeply merged with the default theme. ### Theme Object Reference | **Name** | **Description** | **Type** | |:-----------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------| | `focusRing` | Controls focus ring styles. Options: `auto` (default, shows when navigating with keyboard), `always` (shows for keyboard and mouse), `never` (always hidden, not recommended). | 'auto' or 'always' or 'never' | | `scale` | rem units scale, adjust if customizing `` font-size. Default: `1` (16px font-size). | `number` | | `fontSmoothing` | Determines whether `font-smoothing` is applied to the body. Default: `true`. | `boolean` | | `white` | Base white color. Example: `#ffffff`. | `string` | | `black` | Base black color. Example: `#000000`. | `string` | | `colors` | Object of colors, where each key is a color name, and each value is an array of at least 10 shades. Example: `colors.blue = ['#f0f8ff', '#add8e6', ...]`. | `object` | | `primaryShade` | Determines which shade of `colors.primary` is used. Options: `{light: 6, dark: 8}` (default) or a single number (e.g., `6` for both modes). | `number or object` | | `primaryColor` | Key of `theme.colors`. Determines the default primary color. Default: `blue`. | `string` | | `variantColorResolver` | Function to resolve colors for variants like `Button` and `ActionIcon`. Can be used for deep customization. | `function` | | `autoContrast` | If `true`, adjusts text color for better contrast based on the background color. Default: `false`. | `boolean` | | `luminanceThreshold` | Threshold for determining whether text should be light or dark when `autoContrast` is enabled. Default: `0.3`. | `number` | | `fontFamily` | Font-family used in all components. Example: `'Arial, sans-serif'`. | `string` | | `fontFamilyMonospace` | Monospace font-family used in code components. Example: `'Courier, monospace'`. | `string` | | `headings` | Controls heading styles. Includes `fontFamily`, `fontWeight`, `textWrap` (e.g., `'wrap'`, `'nowrap'`) and sizes for `h1` to `h6` (e.g., `{'fontSize': 32, 'lineHeight': 1.4}`). | `object` | | `radius` | Object defining border-radius values. Example: `{sm: 4, md: 8, lg: 16}`. | `object` | | `defaultRadius` | Default border-radius used by most components. Example: `md`. | `string` | | `spacing` | Object defining spacing values (e.g., margins, padding). Example: `{xs: 4, sm: 8, md: 16, lg: 24}`. | `object` | | `fontSizes` | Object defining font-size values. Example: `{xs: 12, sm: 14, md: 16, lg: 20}`. | `object` | | `lineHeights` | Object defining line-height values. Example: `{xs: 1.2, sm: 1.4, md: 1.6}`. | `object` | | `breakpoints` | Object defining responsive breakpoints (in em). Example: `{xs: 30, sm: 48, md: 64}` (for 480px, 768px, and 1024px respectively). | `object` | | `shadows` | Object defining box-shadow values. Example: `{sm: '0px 1px 3px rgba(0, 0, 0, 0.2)', md: '0px 4px 6px rgba(0, 0, 0, 0.1)'}`. | `object` | | `respectReducedMotion` | If `true`, respects OS reduce-motion settings. Default: `false`. | `boolean` | | `cursorType` | Determines cursor style for interactive elements. Options: `'default'` or `'pointer'`. Default: `'default'`. | `'default' or 'pointer'` | | `defaultGradient` | Default gradient configuration. Example: `{'from': '#6a11cb', 'to': '#2575fc', 'deg': 45}`. | `object` | | `activeClassName` | CSS class applied to elements with active styles (e.g., `Button`). | `string` | | `focusClassName` | CSS class applied to elements with focus styles (overrides `focusRing`). | `string` | | `components` | Customizations for individual components (e.g., default props for `Button`). | `object` | | `other` | User-defined custom properties for additional flexibility. | `object` | ## Theme Switch Components Examples of components to switch between light and dark modes Category: Theming ### ColorSchemeToggle Component For apps using DMC versions ≥ 2.6, it is recommended to use the [ColorSchemeToggle](/components/colorschemetoggle) component. It automatically switches between light and dark themes and persists the user’s selection in localStorage. Copy this app to run it locally. For a live demo, click the ColorSchemeToggle in the header of these docs. > The toggle handles theme switching internally and does not require a Dash callback. For more information, see the [ColorSchemeToggle](/components/colorschemetoggle) documentation. ```python import dash_mantine_components as dmc from dash import Dash from dash_iconify import DashIconify app = Dash() component = dmc.ColorSchemeToggle( lightIcon=DashIconify(icon="radix-icons:sun", width=20), darkIcon=DashIconify(icon="radix-icons:moon", width=20), color="yellow", size="lg", m="xl", ) app.layout = dmc.MantineProvider(component) if __name__ == "__main__": app.run(debug=True) ``` ### Mantine Light and dark themes Mantine sets the light and dark color schemes using the `data-mantine-color-scheme` attribute on the `` element. This allows it to apply global styles dynamically based on the theme. If you are not using the `ColorSchemeToggle` component, you can switch themes by setting the `data-mantine-color-scheme` in a clientside callback. ### Custom Theme Switch This example shows how to use the `Switch` component with icon labels to create a theme switch component. The `Switch` is set with `persistence=True` to retain the selected theme even after a browser refresh. Use this approach if you are on DMC < 2.6.0 or want a custom control (such as `Switch`, `SegmentedControl`, or `Button` etc.) instead of the `ActionIcon` used by `ColorSchemeToggle`. Here is a complete minimal example: ```python import dash_mantine_components as dmc from dash_iconify import DashIconify from dash import Dash, Input, Output, clientside_callback theme_toggle = dmc.Switch( offLabel=DashIconify(icon="radix-icons:sun", width=15, color= "var(--mantine-color-yellow-8)"), onLabel=DashIconify(icon="radix-icons:moon", width=15, color= "var(--mantine-color-yellow-6)"), id="color-scheme-switch", persistence=True, color="grey", ) app = Dash() app.layout = dmc.MantineProvider( [theme_toggle, dmc.Text("Your page content")], ) clientside_callback( """ (switchOn) => { document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light'); return window.dash_clientside.no_update } """, Output("color-scheme-switch", "id"), Input("color-scheme-switch", "checked"), ) if __name__ == "__main__": app.run(debug=True) ``` ## Typography How to set fonts, size and line height in the app theme Category: Theming ### Change fonts You can change fonts and other text styles for headings, code and all other components with the following theme properties: - `theme.fontFamily` – controls font-family in all components except `Title`, `Code` and `Kbd` - `theme.fontFamilyMonospace` – controls font-family of components that require monospace font: `Code`, `Kbd` and `CodeHighlight` - `theme.headings.fontFamily` – controls font-family of h1-h6 tags in `Title`, fallbacks to `theme.fontFamily` if not defined In this example, you can toggle between the default fonts and custom fonts specified in the `theme`. ```python import dash_mantine_components as dmc from dash import Dash, Input, Output app = Dash() component = dmc.Box([ dmc.SegmentedControl(id="segment", data=["default", "custom-fonts"], value="default"), dmc.Box([ dmc.Title("Greycliff CF title", order=3), dmc.Button("Verdana button"), dmc.Code("Monaco, Courier Code") ], bd=True, m="lg") ], m="lg") theme= { "fontFamily": 'Verdana', "fontFamilyMonospace": 'Monaco, Courier, monospace', "headings": { "fontFamily": 'Greycliff CF' }, } app.layout = dmc.MantineProvider( component, id="provider", ) @app.callback( Output("provider", "theme"), Input("segment", "value") ) def update_font_theme(val): if val == "default": return {} return theme if __name__ == "__main__": app.run(debug=True) ``` ### System fonts By default, Mantine uses system fonts. It means that different devices will display components based on available font, for example, macOS and iOS users will see San Francisco font, Windows users will see Segoe UI font, Android users will see Roboto font and so on. This approach provides a familiar experience to the users and allows avoiding common problems related to custom fonts loading (layout shift, invisible text, etc.), if you do not have strict requirements, it is recommended to use system fonts for better performance. Default values for theme properties: - Default value for `theme.fontFamily` and `theme.headings.fontFamily` is `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji` - Default value for `theme.fontFamilyMonospace` is `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace` ### Font Sizes Default `theme.fontSizes` Values | Key | Value | Value in px | |-----|------------|-------------| | xs | 0.75rem | 12px | | sm | 0.875rem | 14px | | md | 1rem | 16px | | lg | 1.125rem | 18px | | xl | 1.25rem | 20px | You can customize the `fontSizes` defaults in the `theme`: ```python theme = { "fontSizes" : { "xs": "0.75rem", # customize font sizes here "sm": "0.875rem", "md": "1rem", "lg": "1.125rem", "xl": "1.25rem", } } dmc.MantineProvider( # your layout, theme=theme ) ``` ### Line Heights `theme.lineHeights` property defines line-height values for `Text` component, most other components use `theme.lineHeights.md` by default: Default `theme.lineHeights` Values | Key | Value | |-----|--------| | xs | 1.4 | | sm | 1.45 | | md | 1.55 | | lg | 1.6 | | xl | 1.65 | You can customize the `lineHeights` defaults in the `theme`: ```python theme = { "lineHeights" : { "xs": "1.4", # customize line heights here "sm": "1.45", "md": "1.55", "lg": "1.6", "xl": "1.65", } } dmc.MantineProvider( # your layout, theme=theme ) ``` ### h1-h6 styles To customize headings styles in `Title` components set `theme.headings`: ```python import dash_mantine_components as dmc theme = { "headings": { # Properties for all headings "fontWeight": "400", "fontFamily": "Roboto", # Properties for individual headings "sizes": { "h1": { "fontWeight": "100", "fontSize": "36px", "lineHeight": "1.4", }, "h2": { "fontSize": "30px", "lineHeight": "1.5", }, # Additional heading levels "h6": { "fontWeight": "900", }, }, }, } dmc.MantineProvider( # your app layout here, theme=theme, ) ``` With `theme.headings` you can customize `font-size`, `font-weight` and `line-height` per heading level. If you need more control over styles, use `:is` selector with [Styles API](/styles-api) to target specific heading level: You can find a complete minimal example in the [Help Center](https://github.com/snehilvj/dmc-docs/blob/main/help_center/theme/change_headings.py) ```python theme = { "components": { "Title": { "classNames": { "root": "change-heading-demo", }, }, }, } dmc.MantineProvider( theme=theme, children=[ dmc.Title("Heading 1", order=1), dmc.Title("Heading 2", order=2), dmc.Title("Heading 3", order=3), dmc.Title("Heading 4", order=4), dmc.Title("Heading 5", order=5), dmc.Title("Heading 6", order=6), ], ) ``` In a `.css` file in `/assets` folder add: ```css .change-heading-demo { &:is(h1) { font-family: GreycliffCF, sans-serif; font-weight: 900; } &:is(h5, h6) { color: var(--mantine-color-dimmed); } } ``` ## Blockquote Use the Blockquote to display quotes with optional cite and icon. Category: Typography ### Simple Example A simple blockquote can be created by just passing the main message and `cite` prop. ```python import dash_mantine_components as dmc component = dmc.Blockquote( "Everything we hear is an opinion, not a fact. Everything we see is a perspective, not the truth.", cite="- Marcus Aurelius , Meditations", ) ``` ### With Icon Icons can be provided via `icon` prop and its color can be customized using the `color` prop. Here's an example using [DashIconify](/dash-iconify). ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Blockquote( "Doth mother know you weareth her drapes?", cite="- Ironman", icon=DashIconify(icon="codicon:flame", width=30), color="red", ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:-------|:--------------------------|:-------------------| | root | .mantine-Blockquote-root | Root element | | icon | .mantine-Blockquote-icon | Icon wrapper | | cite | .mantine-Blockquote-cite | Cite element | ### Keyword Arguments #### Blockquote - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - cite (a list of or a singular dash component, string or number; optional): Reference to a cited quote. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - icon (a list of or a singular dash component, string or number; optional): Blockquote icon, displayed on the top left. - iconSize (string | number; optional): Controls icon `width` and `height`, numbers are converted to rem, `40` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Code Use Code to display code without syntax highlighting. Category: Typography ### Inline Code ```python import dash_mantine_components as dmc component = dmc.Code("app = Dash(__name__)") ``` ### Block Code ```python import dash_mantine_components as dmc component = dmc.Code( """from dash import Dash import dash_mantine_components as dmc app = Dash(__name__) app.layout = dmc.Button("Settings") if __name__ == "__main__": app.run_server(debug=True)""", block=True, ) ``` ### Colors ```python import dash_mantine_components as dmc code = "import collections" component = dmc.Group( children=[ dmc.Code(code, color=color) for color in ["red", "blue", "green", "pink"] ], ) ``` ### Syntax Highlighting In case you need syntax highlight like in all code examples on this documentation, use [dmc.CodeHighlight](/components/code-highlight) component. ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:-------------|:-------------------|:----------------------------------------------| | root | .mantine-Code-root | Root element | ### Keyword Arguments #### Code - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - block (boolean; optional): If set code will be rendered inside `pre`, `False` by default. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, controls `background-color` of the code, by default value is calculated based on color scheme. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## CodeHighlight Use CodeHighlight component for highlighting code snippets with syntax highlighting for different languages like python, cpp, javascript, etc. Category: Typography ### CSS Extensions As of DMC 1.2.0, `CodeHightlight` component styles are bundled automatically, so you no longer need to include a separate CSS file. If you're using an older version of DMC, refer to the [migration guide](/migration) for instructions on including optional stylesheets. ### Simple Usage `CodeHighlight` highlight given code with [highlight.js](https://highlightjs.org/), it accepts `code` prop with string of code to highlight and `language` prop with language name. If language is not provided, `CodeHighlight` will assume that the code language is `tsx` (TypeScript). `CodeHighlight` is used to show the code for all the examples in these docs. ```python import dash_mantine_components as dmc component = dmc.CodeHighlight( language="python", code="""# Kadane's Algorithm class Solution: def maxSubArray(self, nums: List[int]) -> int: curr, summ = nums[0], nums[0] for n in nums[1:]: curr = max(n, curr + n) summ = max(summ, curr) return summ""", ) ``` ### Supported Languages The `CodeHighlight` components supports syntax highlighting for the top 10 most commonly used languages: * `python` / `py` * `javascript` / `js` * `typescript` / `ts` * `html` / `xml` * `css` * `json` * `yaml` / `yml` * `bash` / `sh` * `sql` * `markdown` / `md` If you set `language="some-unsupported-lang"`, the code will render with no syntax highlighting. If you need support for a language not currently included, please open an issue on our [GitHub repository.](https://github.com/snehilvj/dash-mantine-components/issues) ### Copy button You can customize copy button labels with `copyLabel` and `copiedLabel` props. In case you need to remove the copy button, set `withCopyButton=False`. ```python import dash_mantine_components as dmc component = dmc.Stack([ dmc.CodeHighlight( code = "dmc.Text('This codeblock has a custom copy button label')", language="python", copyLabel="Copy button code", copiedLabel="Copied!", ), dmc.CodeHighlight( code = "dmc.Text('This codeblock does not have a copy button')", language="python", withCopyButton=False, mt="md" ) ]) ``` ### With tabs `CodeHighlightTabs` component allows organizing multiple code blocks into tabs: The `code` prop is a list of dictionaries, where each dictionary defines a tab. Each dictionary can include the following keys: - `fileName`: The label for the tab. - `code`: The code string to display in the tab. - `language`: The programming language for syntax highlighting. - `icon`: An optional component to display to the left of the fileName. ```python code = [ { "fileName": "demo.py", "code": demo_py, # your code string here "language": "python", "icon": DashIconify(icon="vscode-icons:file-type-python", width=20), }, { "fileName": "styles.css", "code":styles_css, # your code string here "language": "css", "icon": DashIconify(icon="vscode-icons:file-type-css", width=20), }, ] dmc.CodeHighlightTabs(code=code) ``` ### Expandable code If the code snippet is too long, you can make it expandable with `withExpandButton` and `defaultExpanded=False` props. To change label of the expand/collapse control tooltip, use `expandCodeLabel` and `collapseCodeLabel`. Note - the expandable code feature is only available in the `CodeHighlightTabs` component. ### Inline code `InlineCodeHighlight` component allows highlighting inline code snippets: ```python import dash_mantine_components as dmc component = dmc.Text( [ "You can highlight code inline ", dmc.InlineCodeHighlight( code='dmc.InlineCodeHighlight(code="Your code string here", language="python")', language="python", ), " Is not that cool?", ] ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### CodeHighlight Selectors | Selector | Static selector | Description | |----------|--------------------------------|--------------------------------------| | root | .mantine-CodeHighlight-root | Root element | | pre | .mantine-CodeHighlight-pre | Pre element, contains code element | | code | .mantine-CodeHighlight-code | Code element | | copy | .mantine-CodeHighlight-copy | Copy button | #### CodeHighlightTabs Selectors | Selector | Static selector | Description | |---------------|--------------------------------------|--------------------------------------------------------| | root | .mantine-CodeHighlightTabs-root | Root element | | pre | .mantine-CodeHighlightTabs-pre | Pre element, contains code element | | codeWrapper | .mantine-CodeHighlightTabs-codeWrapper | Wrapper around code element, used for expand/collapse logic | | code | .mantine-CodeHighlightTabs-code | Code element, contains highlighted code | | header | .mantine-CodeHighlightTabs-header | Header element, contains copy button and file names | | controls | .mantine-CodeHighlightTabs-controls | Controls container, contains control buttons (copy, collapse, etc.) | | control | .mantine-CodeHighlightTabs-control | Control button (copy, collapse, etc.) | | files | .mantine-CodeHighlightTabs-files | File names list | | file | .mantine-CodeHighlightTabs-file | File name | | fileIcon | .mantine-CodeHighlightTabs-fileIcon | File icon | | showCodeButton| .mantine-CodeHighlightTabs-showCodeButton | Button that reveals full code when it is collapsed | #### InlineCodeHighlight Selectors | Selector | Static selector | Description | |----------|-------------------------------------|----------------| | code | .mantine-InlineCodeHighlight-code | Root element | ### Keyword Arguments #### CodeHighlight - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - code (string; required): Code to highlight. - copiedLabel (string; optional): Copied tooltip label, `'Copied'` by default. - copyLabel (string; optional): Copy tooltip label, `'Copy code'` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - highlightOnClient (boolean; optional): Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), `False` by default. - language (string; required): Code language, `'tsx'` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withCopyButton (boolean; optional): Determines whether copy button should be displayed, `True` by default. #### CodeHighlightTabs - id (string; optional): Unique ID to identify this component in Dash callbacks. - activeTab (number; optional): Index of controlled active tab state. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - code (boolean | number | string | dict | list; required): Code to highlight with meta data (file name and icon). - collapseCodeLabel (string; optional): Collapse button label and tooltip, `'Collapse code'` by default. - copiedLabel (string; optional): Copied tooltip label, `'Copied'` by default. - copyLabel (string; optional): Copy tooltip label, `'Copy code'` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - defaultExpanded (boolean; optional): Uncontrolled expanded state initial value. - expandCodeLabel (string; optional): Expand button label and tooltip, `'Expand code'` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - maxCollapsedHeight (string | number; optional): `max-height` of code in collapsed state. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withCopyButton (boolean; optional): Determines whether copy button should be displayed, `True` by default. - withExpandButton (boolean; optional): Determines whether to show the expand button, `False` by default. - withHeader (boolean; optional): Determines whether header with file names and copy button should be rendered, `True` by default. #### InlineCodeHighlight - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - code (string; required): Code to highlight. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - language (string; optional): Code language, `'tsx'` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Highlight Use the Highlight component to highlight a substring in a given string with mark tag. Category: Typography ### Simple Example Use Highlight component to highlight a substring in a given string with a mark tag. Pass the main string as children to Highlight component and string part that should be highlighted to `highlight` prop. If the main string does not include `highlight` part, it will be ignored. `Highlight` ignores trailing whitespace and highlights all matched characters sequences. ```python import dash_mantine_components as dmc component = dmc.Highlight( "Highlight this, definitely this and also this!", highlight="this" ) ``` ### Change highlight styles ```python import dash_mantine_components as dmc component = dmc.Highlight( "You can change styles of highlighted part if you do not like default styles", ta="center", highlight=["highlighted", "default"], highlightStyles={ "backgroundImage": "linear-gradient(45deg, var(--mantine-color-cyan-5), var(--mantine-color-indigo-5))", "fontWeight": 500, "WebkitBackgroundClip": "text", "WebkitTextFillColor": "transparent", }, ) ``` ### Colors You can customize the highlight color with the `color` prop from one of colors in Mantine's theme. ```python import dash_mantine_components as dmc component = dmc.Highlight( "Highlight this, definitely this and also this!", highlight="this", color="lime", ) ``` ### Highlight Multiple Strings To highlight multiple substrings, provide an array of values. ```python import dash_mantine_components as dmc component = dmc.Highlight( "Highlight this, definitely this and also that!", highlight=["this", "that"] ) ``` ### Text Props Highlight component supports same props as Text component. ```python import dash_mantine_components as dmc component = dmc.Highlight( "Highlight this, definitely this and also this!", highlight="this", size="lg", c="green", color="yellow", ta="center", ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:-----|:------------------------|:-------------| | root | .mantine-Highlight-root | Root element | ### Keyword Arguments #### Highlight - children (string; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, passed to `Mark` component `color` prop, `yellow` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - gradient (dict; optional): Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default. `gradient` is a dict with keys: - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - highlight (string | list of strings; required): Substring or an array of substrings to highlight in `children`. - highlightStyles (dict; optional): Styles applied to `mark` elements. Note CSS properties are camelCase, for example `highlightStyles={"backgroundColor": "blue"}`. `highlightStyles` is a dict with keys: - inherit (boolean; optional): Determines whether font properties should be inherited from the parent, `False` by default. - inline (boolean; optional): Sets `line-height` to 1 for centering, `False` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - lineClamp (number; optional): Number of lines after which Text will be truncated. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - size (optional): Controls `font-size` and `line-height`, `'md'` by default. - span (boolean; optional): Shorthand for `component="span"`, `False` by default, default root element is `p`. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - truncate (boolean; optional): Side on which Text must be truncated, if `True`, text is truncated from the start. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## List Use List component to show ordered and unordered lists with icon support. Category: Typography ### Simple Example ```python import dash_mantine_components as dmc component = dmc.List( [ dmc.ListItem( dmc.Text( [ "Join our ", dmc.Anchor( "Discord", href="https://discord.gg/KuJkh4Pyq5", underline=False ), " Community.", ] ) ), dmc.ListItem("Install python virtual environment."), ] ) ``` ### Interactive Demo ### With Icons ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.List( icon=dmc.ThemeIcon( DashIconify(icon="radix-icons:check-circled", width=16), radius="xl", color="teal", size=24, ), size="sm", spacing="sm", children=[ dmc.ListItem("Join our Discord Community."), dmc.ListItem("Install python virtual environment."), dmc.ListItem( dmc.Text(["Install npm dependencies with ", dmc.Code("npm install")]) ), dmc.ListItem( dmc.Text(["Add your new component in ", dmc.Code("src/lib/components.")]) ), dmc.ListItem( "Raise a PR, including an example to reproduce the changes contributed by the PR.", icon=dmc.ThemeIcon( DashIconify(icon="radix-icons:pie-chart", width=16), radius="xl", color="blue", size=24, ), ), ], ) ``` ### Nested Lists ```python import dash_mantine_components as dmc component = dmc.List( [ dmc.ListItem("First order item"), dmc.ListItem("First order item"), dmc.ListItem( [ "First order item with list", dmc.List( withPadding=True, listStyleType="disc", children=[ dmc.ListItem("Nested Item"), dmc.ListItem("Nested Item"), dmc.ListItem( [ "Nested item with list", dmc.List( withPadding=True, listStyleType="disc", children=[ dmc.ListItem("Even more nested"), dmc.ListItem("Even more nested"), ], ), ] ), dmc.ListItem("Nested Item"), ], ), ] ), dmc.ListItem("First order item"), ] ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------|:--------------------------|:------------------------------------------------------| | root | .mantine-List-root | Root element | | item | .mantine-List-item | ListItem root element | | itemIcon | .mantine-List-itemIcon | ListItem icon | | itemLabel | .mantine-List-itemLabel | ListItem content | | itemWrapper | .mantine-List-itemWrapper | ListItem wrapper element, container, icon and content | ### Keyword Arguments #### List - children (a list of or a singular dash component, string or number; optional): `List.Item` components only. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - center (boolean; optional): Determines whether items must be centered with their icon, `False` by default. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - icon (a list of or a singular dash component, string or number; optional): Icon that replaces list item dot. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - listStyleType (optional): Controls `list-style-type`, by default inferred from `type`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional): Controls `font-size` and `line-height`, `'md'` by default. - spacing (number; optional): Key of `theme.spacing` or any valid CSS value to set spacing between items, `0` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - type (a value equal to: 'ordered', 'unordered'; optional): List type: `ol` or `ul`, `'unordered'` by default. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withPadding (boolean; optional): Determines whether list items should be offset with padding, `False` by default. #### ListItem - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - icon (a list of or a singular dash component, string or number; optional): Icon to replace item bullet. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Mark Use the Mark component to highlight part of the text. Category: Typography ### Introduction ```python import dash_mantine_components as dmc component = dmc.Text( [ "Thanks for checking out ", dmc.Mark("Dash Mantine Components."), " You are awesome!", ] ) ``` ### Change color ```python import dash_mantine_components as dmc component = dmc.Text( ["Highlight ", dmc.Mark("this section", color="cyan"), " of the text."] ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------|:-------------------|:-------------------------------------------------| | root | .mantine-Mark-root | Root element | ### Keyword Arguments #### Mark - children (string; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Key of `theme.colors` or any valid CSS color, `yellow` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. ## Table Use the Table component to display tables with Mantine's theme styles. An alternative to html.Table Category: Typography > Looking for advanced table capabilities? [Dash AG Grid](/dash-ag-grid) pairs well with DMC and supports editing, sorting, filtering, selecting, conditional formatting and much more. ### Simple Example Use Table component to add Mantine styled tables in your app. use `dmc.Table` and associated components as drop-in replacements for `html.Table` and associated components respectively. ```python import dash_mantine_components as dmc elements = [ {"position": 6, "mass": 12.011, "symbol": "C", "name": "Carbon"}, {"position": 7, "mass": 14.007, "symbol": "N", "name": "Nitrogen"}, {"position": 39, "mass": 88.906, "symbol": "Y", "name": "Yttrium"}, {"position": 56, "mass": 137.33, "symbol": "Ba", "name": "Barium"}, {"position": 58, "mass": 140.12, "symbol": "Ce", "name": "Cerium"}, ] rows = [ dmc.TableTr( [ dmc.TableTd(element["position"]), dmc.TableTd(element["name"]), dmc.TableTd(element["symbol"]), dmc.TableTd(element["mass"]), ] ) for element in elements ] head = dmc.TableThead( dmc.TableTr( [ dmc.TableTh("Element Position"), dmc.TableTh("Element Name"), dmc.TableTh("Symbol"), dmc.TableTh("Atomic Mass"), ] ) ) body = dmc.TableTbody(rows) caption = dmc.TableCaption("Some elements from periodic table") component = dmc.Table([head, body, caption]) ``` ### data prop You can use `data` prop to automatically generate table rows from raw data. `data` prop accepts an object with the following properties: `head`, `foot`, `body`, `caption`: ```python import dash_mantine_components as dmc component = dmc.Table( data={ "caption": "Some elements from periodic table", "head": ["Element position", "Atomic mass", "Symbol", "Element name"], "body": [ [6, 12.011, "C", "Carbon"], [7, 14.007, "N", "Nitrogen"], [39, 88.906, "Y", "Yttrium"], [56, 137.33, "Ba", "Barium"], [58, 140.12, "Ce", "Cerium"], ], } ) ``` ### Spacing To control spacing use `horizontalSpacing` and `verticalSpacing` props. Both props support spacing from Mantine's theme and number values to set cell padding in px. ### Striped and Rows Hover ### Scroll container To prevent viewport overflow wrap `Table` with `TableScrollContainer`. The component accepts `minWidth` prop which sets minimum width below which table will be scrollable. By default, `TableScrollContainer` uses `ScrollArea`, you can change it to native scrollbars by setting `type="native"` You can also set `maxHeight` prop on `TableScrollContainer` to limit table height ```python import dash_mantine_components as dmc import random rows = [ [ i + 1, f"S-{1000 + i}", round(random.uniform(15, 30), 1), # Temperature °C round(random.uniform(30, 70), 1), # Humidity % ] for i in range(50) ] component = dmc.TableScrollContainer( dmc.Table( data={ "caption": "Synthetic Sensor Readings", "head": ["#", "Sensor ID", "Temperature (°C)", "Humidity (%)"], "body": rows, }, striped=True, highlightOnHover=True, withTableBorder=True, ), maxHeight=300, minWidth=600, type="scrollarea", ) ``` ### Vertical variant Set `variant="vertical"` to render table with vertical layout: ```python import dash_mantine_components as dmc component = dmc.Table( withTableBorder=True, layout="fixed", variant="vertical", children=[ dmc.TableTbody([ dmc.TableTr([ dmc.TableTh("Epic name", w=160), dmc.TableTd("7.x migration"), ]), dmc.TableTr([ dmc.TableTh("Status"), dmc.TableTd("Open"), ]), dmc.TableTr([ dmc.TableTh("Total issues"), dmc.TableTd("135"), ]), dmc.TableTr([ dmc.TableTh("Total story points"), dmc.TableTd("874"), ]), dmc.TableTr([ dmc.TableTh("Last updated at"), dmc.TableTd("September 26, 2024 17:41:26"), ]), ]) ] ) ``` ### tableProps Use `tableProps` to pass additional [HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) to the underlying elements of a dmc.Table, such as `Welcome to Mantine rich text editor
RichTextEditor component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. RichTextEditor is based on Tiptap.dev and supports all of its features:
- General text formatting: bold, italic, underline,
strike-through - Headings (h1-h6)
- Sub and super scripts (<sup /> and <sub /> tags)
- Ordered and bullet lists
- Text align
- And all other extensions