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)
28 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:

1 Like

Thanks @AnnMarieW for the encouraging words.

1 Like

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.

3 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.

As others have said, this is some very nice work @snehilvj.

Have you given any thought to adding the AppShell component? Unfortunately, I’m a bit new to Dash and although I can wrap simple components, I don’t think I could contribute anything useful at this stage, but AppShell looks like a very useful, albeit complex, component.
Thanks
Paul

1 Like

Thanks @PaulQ. Yes I do plan to add AppShell component, I think it can be very useful and it’s already in my backlog. But as you yourself have mentioned, wrapping it can be time taking. I hope to release it in the next major version of dmc.

1 Like

Great features! The date-picker is prettier than others alternatives. I have to add it in next projects.

Is possible do filter and sorting data in table component?

Hi @bernarducs, currently the table component included in the dash-mantine-components is simply a styled html table rather than a fully functional data grid. Hopefully in some time, it will be available.

I just started my first implementation. It seems that Grid has been implemented, but Col has not? Is that correct? Does that mean that you can’t use Grid yet? @snehilvj

EDIT: I just noticed that the component is available on the repo. After building the library locally, I am able to use the Col component :slight_smile:

what version of dmc are you using? I’m sure I released it in 0.2.0. I’ll correct it if that’s not the case. Thanks for the feedback.

Yes, it was with release 0.2.0, that I tested. So at the moment I am using a custom build. I also noticed a bug in the Accordion component, here is a PR to fix it :slight_smile:

EDIT: I believe this issue affects other components as well. I just added those also (though I haven’t done any testing on those)

1 Like

Hi @Emil just back from my vacations. I’ll have a look at this PR and also the issue you raised on GitHub. Thanks a lot for taking interest in this project and providing valuable inputs. I’m new to the open source scene but I want to give it my best.

@snehilvj That would be great. I believe the first two are pretty clear cut, but the last one (about tables) is more of a discussion point. At the moment, I am leaning towards the approach of passing html components directly to the table as children. Anything else seems to become restricted and/or complicated :slight_smile:

Hi Guys :wave:

Happy to share that I have just released a new version of the library: 0.2.2. It brings new components with itself along with quite a few bug fixes.

I have also created some good documentation now: docs. Although there are more than 40 components in the library, docs only have around 10 of them for now. So a lot more to follow.
Please let me know your feedback or if you have any feature requests…

Thanks everyone for the support so far!

PS: The documentation is obviously written in dash :grinning: and entirely using dash-mantine-components.

6 Likes

Thanks for sharing!

2 Likes