Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Dash Mantine Components

Hi Everyone

I’m quite excited to share my first open source project with all of you: Dash Mantine Components.

Its a library of custom dash components based on a beautifully crafted react components library Mantine.dev. The components are crisp and beautiful.

Please visit the Mantine.dev website to see the look and feel of these components.

Currently available components are listed in the github readme.
Repository
PyPI

The library can be installed using pip:

pip install dash-mantine-components

I plan to maintain this library for the long haul and hope to learn a lot from the community. My TODO list already includes a thorough documentation, adding more components, and support dark theme.

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", style={"width": "250px"}
        ),
        dmc.Space(h=20),
        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)
8 Likes

Hi @snehilvj and welcome to the Dash community!

This is an impressive project :clap: Thanks for sharing!

I look forward to seeing your documentation and trying out all your new components!

This project looks really interesting. Could you put a few word in why you chose this framework as compared to others? And how it compares to e.g bootstrap components? :blush:

Thanks @AnnMarieW for the encouraging words.

Hi @Emil,

Of all the libraries I reviewed for my needs (ant.design, react bootstrap, rsuite, mantine, etc.), I found the mantine library least distracting, very well documented and well designed component system. Mantine comes with 50+ hooks which I hope to make use of with some dedicated custom components.

Other libraries have more components but mantine is catching up.

The look and feel of bootstrap components feels outdated to me and that’s why I went on looking for more options and ultimately ended up creating my own library.

2 Likes

Very nice work! Looking forward to give it a try!

You mentioned some component libraries and made me wonder: have you considered Chakra UI?

The reason why I am asking is because I started implementing it for outdated professional reasons, but ended up not finding time and motivation to buckle up v0.1 and share with the community… So it could be cool to find a partner in crime to keep going…

Anyways, I shouldn’t hijack your nice post with it, it is a topic that I am (or was) quite interested about it and I am happy to see some nice examples of component libraries outside BS and Material UI.

Hi @jlfsjunior

Thanks for your interest in this project. I did have a look at Chakra UI, its good too. For me, however, it lacked some important components, such as a date picker and a searchable select/multiselect. That said, I’d be happy to work with you on dash-chakraui-components.

1 Like

Having browsed the components a bit, I must agree that the design looks really nice. Do you have any time line for the project? I am currently using bootstrap, but I might consider migrating if this library becomes sufficiently mature.

Feel free to ping me about development questions, I have developed quite a few Dash components in my days :slight_smile:

1 Like

I’ll set up a GitHub project to track the progress. And I’ll definitely take you up on your offer.