Dash Mantine Components is an extensive (90+) Dash components library based on Mantine React Components Library. It makes it easier to create good quality dashboards with very well designed components out of the box.

Documentation

Table of contents

• Installation
• Quickstart
• Sponsors
• Contributing

Installation

pip install dash-mantine-components

Quickstart

from datetime import date

import dash
from dash import Dash, Input, Output, callback, html
from dash.exceptions import PreventUpdate

import dash_mantine_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = Dash(__name__, external_stylesheets=dmc.styles.ALL)

app.layout = dmc.MantineProvider(
    [
        dmc.DatePicker(
            id="date-picker",
            label="Start Date",
            description="You can also provide a description",
            minDate=date(2020, 8, 5),
            value=None,
            w=200
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date"),
    ]
)


@callback(Output("selected-date", "children"), Input("date-picker", "value"))
def update_output(d):
    prefix = "You have selected: "
    if d:
        return prefix + d
    else:
        raise PreventUpdate


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

Sponsors

Thanks to the following people for supporting my efforts on dash-mantine-components.

1. Ann Marie Ward
2. Arne Petter

Contributing

1. Join our Discord community.

2. Install virtual environment:

   python -m venv venv
   source venv/bin/activate
   pip install -r requirements.txt

3. Install npm dependencies

   npm install

4. Add your new component in src/lib/components. Make sure to include it in the src/lib/index.js as well.

5. Build the components with the command: npm run build.

twine upload dist/*

change package names to autofeather, rebuild and publish to npm

6. Raise a PR, including an example to reproduce the changes contributed by the PR.

7. Unless you have changed dependencies, please do not include package-lock.json or yarn.lock files.

Contributing to the Docs

We :heart: contributions to our documentation! It's a fantastic opportunity for first-time contributors since the project is simply a Dash app built with dash-mantine-components. For more details, check out the dmc-docs GitHub.