emilhe/dash-mantine-components

Dash components based on Mantine React Components

Dash Mantine Components is an extensive (55+) 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
• Contributing
• TODO

Installation

pip install dash-mantine-components

Quickstart

import dash_mantine_components as dmc
from dash import Dash, Input, Output

app = Dash(__name__)

app.layout = html.Div(
    [
        dmc.DatePicker(id="datepicker", format="dddd, MMMM D, YYYY"),
        dmc.Text(id="text"),
        dmc.Button("Click Me!")
    ]
)


@app.callback(Output("text", "children"), Input("datepicker", "date"))
def datepicker(date):
    return date


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

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. Ensure that component props are sorted in ascending order. Refer to existing components.

6. Add a line in the CHANGELOG.md under one of these: Added, Changed, Deprecated, Removed, Fixed.

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

TODO

1. Add more components from Mantine library and enhance already added ones.
2. Add contributing guide.
3. Add testing.
4. Enhance docs.
5. Add lazy loading to the components.