Custom Components for Dash Mantine Components

Introduction

This repository shows how to build custom Dash components using Mantine components and hooks. It includes examples of custom inputs that use Combobox, such as Select and MultiSelect.

The components are based on examples in Mantine’s Combobox examples. See also Mantine's Combobox documentation

Requires dash-mantine-components>=2.5.0

Project Setup

To create your own custom component project, start by following the instructions in Plotly’s Dash TypeScript Component Template. This template sets up everything you need to build Dash components with React and TypeScript.

The template will generate:

• A standard project structure for Dash components
• A React + TypeScript development environment
• A build pipeline that produces the JavaScript bundles and Python package
• A generated Python API for your custom components

This repository was created from that template and then extended to support Mantine-based components.

Using the Mantine wrapper

Dash Mantine Components (≥ 2.5.0) exposes MantineCore and MantineHooks on the global window object. To safely use these APIs in custom components, this project includes a small wrapper that:

• Waits until the Mantine APIs are available
• Ensures your component uses the same Mantine context and theme as the Dash app
• Avoids the need to add a separate MantineProvider inside your component

You can copy this wrapper directly into your own project.

Once copied, wrap your custom React components with it before exporting them. This allows your components to access Mantine hooks and utilities in a safe and consistent way.

See usage.py for an example of how these wrapped components are used in a Dash app.

Version Requirements

This project depends on Mantine being supplied by Dash Mantine Components. Your Dash app must use dash-mantine-components ≥ 2.5.0, and your custom component’s Mantine dependencies must match that version.

Set the Mantine versions in your project’s package.json accordingly. This project uses dash-mantine-components==2.5.0 with Mantine 8.3.13. Refer to the DMC Migration Guide for version mappings.

Mismatched Mantine versions may cause runtime errors.

Updating Webpack

To use Mantine in custom components, add these externals in your webpack.config.js:

'@mantine/core': {
    commonjs: '@mantine/core',
    commonjs2: '@mantine/core',
    amd: '@mantine/core',
    root: 'MantineCore',
},
'@mantine/hooks': {
    commonjs: '@mantine/hooks',
    commonjs2: '@mantine/hooks',
    amd: '@mantine/hooks',
    root: 'MantineHooks',
},

Getting Help

If you need help building custom components, here are some options:

• Use GitHub issues to report bugs or ask questions about these examples.

• Ask questions or discuss custom components with the DMC Discord community

• For broader Dash questions or to share examples use the Dash Community Forum

When asking for help, please include your dash-mantine-components version, the Mantine version from your package.json, and a minimal example if possible.

---

Everything below is automatically generated by the Dash Typescript Component Template:

---

Install

pip install dmc_custom_components

Development

Getting Started

1. Create a new python environment:

   python -m venv venv
   . venv/bin/activate

   Note: venv\Scripts\activate for windows

2. Install python dependencies:

   pip install -r requirements.txt

3. Install npm packages:

   1. Optional: use nvm to manage node version:

      nvm install
      nvm use

   2. Install:

      npm install

4. Build:

   npm run build

Create a production build and publish:

1. Clean up build and dist - removes old and temp tarballs:

rm -rf dist build

2. Run a new build

npm install
npm run build

3. Build source distribution.

npm run dist

4. Test your tarball by copying it into a new environment and installing it locally, for example:

pip install <your-project-name-version>.tar.gz

Note: For local install, use:

pip install -e ./path-to-project

5. Publish on PyPI

Prepare release on the GitHub UI - For more information see Managing Releases When in doubt, do an alpha release first

$ twine upload dist/*

6. If publish on npm:

Note: Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash serves the component library's CSS and JS locally, but if you choose to publish the package to NPM you can set serve_locally to False and you may see faster load times.

npm publish

Justfile

Alternatively, use the provided just commands:

1. Create a Python environment from previous step 1 and install:

   just install

2. Build

   just build

3. Publish

   just publish

4. See all commands with just -l