# dash-mantine-components: a Mantine design system for Plotly Dash

> dash-mantine-components is an MIT licensed library of more than ninety Plotly Dash components built on the Mantine React component library, packaged as a Python package with a TypeScript source tree behind it. The judgement is that it fills a real gap, because Dash had no first party component set with the polish of a modern React design system, and that the interesting part is the build pipeline that turns TypeScript components into Python importable ones.

**snehilvj/dash-mantine-components** — Plotly Dash components based on Mantine React Components

- Repository: https://github.com/snehilvj/dash-mantine-components
- Website: https://www.dash-mantine-components.com
- Stars: 729 · Forks: 77
- Language: TypeScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/snehilvj-dash-mantine-components

## A design system for a framework that did not have one

Dash Mantine Components is described as an extensive library of more than ninety Dash components based on the Mantine React component library, and the stated purpose is to make it easier to create good quality dashboards with very well designed components out of the box.

The gap it fills is real and easy to name. Plotly Dash gives you a component model and a callback model and almost no visual design, so a team that wanted a consistent interface had to build its own component set, in React, in a repository separate from the Python application, and then wrap it. This library does that wrapping once, for everybody.

Mantine is the design system underneath, a React component library, and the Dash components are built on it rather than on a different visual language, which means the components inherit Mantine's behaviour, its layout primitives and its theming rather than approximating them.

The project is MIT licensed, its primary language is TypeScript, and the home page is dash-mantine-components.com. The releases have been steady, version 2.6.1 on 2026-03-26, 2.7.0 on 2026-05-02 and 2.8.0 on 2026-06-09, with the last push to the repository on 2026-10-14, so the tree is being worked on even when the last tag is a few months old.

The distribution channels are the usual ones for a Dash library, a package on PyPI, a Discord server and the Plotly Dash community forum.

## The install is one command and the API is Python

Installation is the shortest part of the readme:

```bash
pip install dash-mantine-components
```

What follows is a Python quickstart, and the shape of it matters. A Dash application is created, and the layout is a MantineProvider wrapping a list of components:

```python
import dash_mantine_components as dmc

app = Dash()

app.layout = dmc.MantineProvider(
    [
        dmc.DatePickerInput(
            id="date-picker",
            label="Start Date",
            description="You can also provide a description",
            minDate='2022-08-05',
            value=None,
            w=200
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date"),
    ]
)
```

Every component is addressed through the dmc namespace and takes Dash props, the id, the label, the description, the minDate, the value, and the width as w. The spacing between elements is a component rather than a style, dmc.Space with a height of 10, which is Mantine's way of doing layout and it carries over intact.

The provider at the top is not decoration. MantineProvider is the element that carries the theme, so everything inside it inherits the same design decisions, and that is why it wraps the whole layout rather than appearing next to the components.

The wiring is ordinary Dash. A callback with a decorator, an Input and an Output, and a return of no_update when there is no value, so the text component only changes when the picker does. The application then runs with app.run_server in debug mode.

## Ninety components, and the ones the readme shows

The readme does not enumerate the library, it names the count, more than ninety components, and shows a handful in use. The three that appear in the quickstart are representative of the range.

DatePickerInput is a date picker with a text input, which is the kind of component that is fiddly to build once and impossible to make consistent across a hundred pages. Space is the layout primitive, and it shows the design decision to make spacing a component rather than a margin convention, so the gap between two elements is the same everywhere without a stylesheet. Text is the plain text component, which is the piece you need for the read and write parts of a dashboard.

The rest of the library is not described in the readme, and the documentation site is where the catalogue lives, with guides, API references and examples. That is a reasonable split, because a list of ninety components in a readme is a list nobody reads, and a reference for each component is a thing you consult when you need it.

For an adopter, the practical question is coverage. A dashboard that needs a table, a modal, a multi-select and a notification will find them in the Mantine set, since the Dash components are built on the React library rather than on a smaller selection of it. The parts of Mantine that are React specific, and therefore not carried across, are the ones to check against your own design before you commit.

## The build turns TypeScript into importable Python components

The package.json is where the project explains itself, and it is a two stage build.

The first stage is the JavaScript bundle, and there are two modes of it, a development build with webpack in development mode and a production build with webpack in production mode. The development mode is also available in watch mode, so a change to a component refreshes the bundle while you work.

The second stage is the Python side, and this is the part that is specific to Dash. The build:backends script runs the Dash component generator against the TypeScript sources in the src/ts/components directory, writing the Python package into dash_mantine_components, and it passes a package-info.json file and an ignore pattern for test files. The generator reads the component metadata, which is collected with react-docgen, a library in the development dependencies that parses the React components to extract their props.

The full build runs both stages, and the distribution script packages the result as a Python source distribution and a wheel using the build module.

The rest of the development dependencies describe the toolchain. TypeScript at 5.6.3, webpack 5 with its loader and style-loader, ts-loader, css-loader, ramda for functional helpers, the Plotly webpack plugin for dynamic imports, dash-extensions-js, a URL sanitising library, and Prettier for formatting. The React and React DOM versions are peer dependencies rather than direct dependencies, pinned at 18.2, which is the right arrangement for a component library because the host application decides which React it runs.

## setup.py reads package.json and two requirement files

The Python packaging is a small piece of code and it is best read, because it shows how the two halves of the project are kept in step.

setup.py opens package.json and loads it as JSON, then derives the Python package name from the name field by replacing spaces and dashes with underscores. The version, the author, the licence, the description and the home page all come from the manifest, so there is one place to bump the version and one place to change the author, and the Python packaging follows the JavaScript packaging automatically.

The dependencies are read from two text files, requires-install.txt for the runtime requirements and requires-dev.txt for the development extras, and the helper function strips blank lines and comments from each. The development requirements become the dev extra.

Everything else in the file is conventional. The package list is the single generated package, include_package_data is on so the built JavaScript bundle ships with the wheel, the long description is the readme with a markdown content type, and the classifiers are Framework :: Dash and Framework :: Flask, the latter being there because a Dash application is a Flask application underneath.

The separate requirements.txt is the development environment rather than the package contract, and it lists the Dash development extra at 2.5.1 or newer along with wheel, build and black. The result is a packaging setup with one source of truth for the metadata, which is a small thing that saves a lot of release day confusion.

## The documentation is itself a Dash application

The section on contributing to the documentation is short and it contains the best argument in the readme.

The documentation is a Dash application built with dash-mantine-components, and it lives in its own repository, dmc-docs. So the person writing a guide about the components is using the components, and the site is the reference implementation.

That arrangement has two effects. The first is that the documentation cannot drift away from the library in the way a separate marketing site does, because the documentation site breaks if the components break. The second is that contributing to the documentation is a much smaller task than contributing to a component library, and the readme says as much, describing it as a fantastic opportunity for first-time contributors.

The rest of the contribution guidance is conventional and generous. Issues for bugs and feature requests, comments on existing issues and pull requests, a contributing guide in the repository, the Discord server for contributors, and the Plotly Dash community forum for discussions and support. There is also a sponsors section, a badge for the personal download count, and a request to star the repository, which tells you the project is funded by individuals rather than by a company.

The repository itself carries the pieces you would expect. The src directory with the TypeScript sources, the dash_mantine_components directory with the generated Python package, a tests directory, a PRs directory, the assets with the images used in the readme, a justfile for the task runner, a shell.nix for a reproducible development shell, a webpack configuration, a TypeScript configuration, a Prettier configuration and a Node version file.

## A justfile covers the whole release path

The justfile is a compact description of the workflow, and it is the fastest way to understand the project's shape.

The build recipes are thin wrappers. The build target runs the npm build, which is the two stage build described earlier, the build-js target runs only the bundle step, the generate target runs only the component generator, and the watch target rebuilds the bundle on change. The install target installs the Python requirements and the node modules in one go.

The release path is four steps. The package target depends on clean and build and runs the Python build module, the publish target depends on package and then publishes to npm and uploads the distributions to PyPI with twine, and the clean target removes the dist and build directories. The format target runs Prettier over the TypeScript sources.

Two entries in that file are more than mechanical. The publish target publishes to both registries, which tells you the package is a hybrid artefact: the Python wheel is what a user installs, and the npm package is what the JavaScript side of the ecosystem consumes. And the build is a single command, npm run build, which is a strong sign that the project is usable by someone who is not the author, because the two stage build and the generator and the bundler all agree on the same entry point.

The changelog file and the release history agree with that. Three releases across the second quarter of 2026, with patch releases alongside the minor ones, which is what you would expect from a library that has to track the Mantine releases underneath it.

## Conclusion

dash-mantine-components fits a Python team building a Dash application that needs a coherent set of controls, a date picker or a select or a modal that looks like the rest of the product, because the library exposes the Mantine component set through the Dash component API and works with ordinary Python callbacks. It is the wrong choice if your application is not a Dash application, because there is no other way to use it, and it is the wrong choice if you cannot have a Node toolchain, because the published package is built from TypeScript sources and rebuilding it needs webpack and the Dash component generator. Before you adopt it, check the React version your application already uses, because the components declare React 18 as a peer dependency, and remember that the provider wrapper is not optional, since the MantineProvider is what supplies the theme to everything inside it.

## FAQ

### What is dash-mantine-components?

It is an MIT licensed library of more than ninety Plotly Dash components built on the Mantine React component library, published on PyPI so it can be installed with pip and used from Python layouts and callbacks.

### How do I install and use it?

Run pip install dash-mantine-components, then import the package as dash_mantine_components and wrap your layout in a MantineProvider, which supplies the theme. Components take the usual Dash props, such as id, label and value, and are wired to callbacks with the standard Input and Output decorators.

### What does the build process do?

The package.json scripts run a webpack build for the JavaScript bundle and then the Dash component generator over the TypeScript sources in src/ts/components, writing the Python package with the component metadata collected by react-docgen. The distribution is then built as a source distribution and a wheel with the Python build module.

### What React version does the library need?

React and React DOM 18.2 are peer dependencies rather than direct dependencies, so the host application decides which React it runs. The development dependencies pin TypeScript at 5.6.3 and webpack 5.

## Sources

- [License: MIT](https://github.com/snehilvj/dash-mantine-components/blob/master/LICENSE)
- [Project website](https://www.dash-mantine-components.com)
- [README](https://github.com/snehilvj/dash-mantine-components/blob/master/README.md)
- [Releases](https://github.com/snehilvj/dash-mantine-components/releases)
- [snehilvj/dash-mantine-components on GitHub](https://github.com/snehilvj/dash-mantine-components)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/snehilvj-dash-mantine-components