This is awesome - nice work! The docs are really coming along too 
I really like the date pickers. It’s so easy to quickly select different months or years. This is a frequently requested feature for the Dash date pickers.
1 Like
Thanks @AnnMarieW for the kind words and guess what, the only reason I started with Dash Mantine Components, was to create an alternative for the default date picker. We have more than 170 dash apps running on our internal research platform with at least 1 date picker in all of them. So you see…
1 Like
Mantine looks sleek, great work @snehilvj 
Sure date pickers are very functional but my favorite one is the Drawer component. Good to see the entire documentation built using DMC, now I can comfortably start working with your library in future Dash projects.
Also you may want to keep an eye 
on your dyno usage on Heroku coz I’ll be referring to the docs a lot.
1 Like
Thanks @atharvakatre. Yeah, I need to think about the Heroku deployment. Also, right now, I’m using the free option, so it sleeps after 30 mins of inactivity.
1 Like
Hi @snehilvj, I just wanted to thank you for making this project. My app is getting so much better thanks to this. That’s really an amazing work!
2 Likes
Thanks @Colb for the kind words. Happy to see that the community is benefitting from this library.
For passers by: Released version 0.5.0, improving loading components such as dmc.LoadingOverlay and dmc.Skeleton and adding persistence to some of the components.
6 Likes
What about dmc.Slider ? Is it ready for use?
I can import it but I don’t see any example at the documentation (https://dash-mantine-components.herokuapp.com/).
Hi @bernarducs
It’s there in the library, you can even see it being used in multiple places in the docs. Give it a try. I’ll also add it in the docs asap (Docs is a WIP but I’ll prioritise Slider).
Website is currently down
@matt1 its because Heroku’s free tier limit got exceeded. Please use this for the time being. I’m moving to a different host (paid) and getting a custom domain so its not a problem in the future.
Edit:
New URL (permanent): https://www.dash-mantine-components.com
2 Likes
Hey, can you update the github readme link too please?
Sure. Thanks for bringing that to my attention.
Hi everyone, I have found a new place for the documentation. They will be available here at: https://www.dash-mantine-components.com.
1 Like
Hey … thanks for the great library . In the latest Dash extensions the burger component is removed and was pointed to this library . Is there an equivalent component that can easily integrated to dash ? I looked into the supported components couple of times and didn’t find a replacement. Would be great if you share your view.
1 Like
Hi @sjillidimudi welcome to the community.
Have a look at ActionIcon component.
I’d recommend using DashIconify for providing icon to ActionIcon component.
You can just setup a callback to open a drawer whenever this action icon is clicked.
@snehilvj Thank you for the nice suggestion … could able to implement it.
1 Like
These components look so much better than those in Bootstrap
Awesome job and thanks for bringing this to my attention!
1 Like
Hi! I have a couple of quastions:
First, is there any possible way to change the plotly graphics from light to dark mode?
Secondly, is there a way to use different templates than the ones you use (for example https://hellodash.pythonanywhere.com/)
I would also like to know how to combine dash-boostrap with dash-mantine, without the css interfering with each other, to choose the best of each library.
Best regards!
Hi @Miguelxda
You ask some great questions!
So far, I haven’t found any conflict using both dash-bootstrap-components with dash-mantine-components. However, it can cause some inconsistencies with the style. You can see an example in the Dash Examples Index. This app is a multi-page app using Dash Pages and Bootstrap. However, some of the example app pages use dash-mantine-components. You can see how it looks by doing a search on “mantine” to bring up all the apps that use dmc, like in this link:
Yes, it’s possible to change the figures to a dark mode. You can either use the built-in plotly figure templates, or the bootstrap themed figure templates. Note that you do not have to use dash-bootstrap-components in the app in order to use the Bootstrap themed figure templates from the dash-bootstrap-templates library.
Here is an example that uses dmc (and not dbc), and demonstrates that you can change the figure template to use a different theme. It also shows how to make categories in the dropdown options with dmc.Select which is pretty cool. 
This app is based on @Tuomas_Gu 's theme change example app
Try running this app locally so you can see all the options 
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
from dash_bootstrap_templates import load_figure_template
import dash_mantine_components as dmc
app = Dash(__name__)
iris = px.data.iris()
gapminder = px.data.gapminder()
tips = px.data.tips()
carshare = px.data.carshare()
plotly_figure_templates = [
"plotly",
"ggplot2",
"seaborn",
"simple_white",
"plotly_white",
"plotly_dark",
"presentation",
"xgridoff",
"ygridoff",
"gridon",
"none",
]
bootstrap_figure_templates_light = [
"bootstrap",
"cerulean",
"cosmo",
"flatly",
"journal",
"litera",
"lumen",
"lux",
"materia",
"minty",
"pulse",
"sandstone",
"simplex",
"sketchy",
"spacelab",
"united",
"yeti",
"superhero",
"morph",
"quartz",
"zephyr",
]
bootstrap_figure_templates_dark = [
"cyborg",
"darkly",
"slate",
"solar",
"superhero",
"vapor",
]
load_figure_template(bootstrap_figure_templates_light + bootstrap_figure_templates_dark)
select_template = html.Div(
dmc.Select(
id="template",
label="Select Figure Template",
value="plotly",
maxDropdownHeight=500,
style={"marginBottom": 10},
data=[
{"value": t, "label": t, "group": "Plotly Figure Templates"}
for t in plotly_figure_templates
]
+ [
{
"value": t,
"label": t,
"group": "Bootstrap Figure Templates - Light Themes",
}
for t in bootstrap_figure_templates_light
]
+ [
{
"value": t,
"label": t,
"group": "Bootstrap Figure Templates - Dark Themes",
}
for t in bootstrap_figure_templates_dark
],
),
)
app.layout = dmc.Container(
[
html.H1("Plotly Figure Template Demo"),
html.Div(select_template),
dmc.SimpleGrid(id="graphs", cols=2),
],
fluid=True,
)
@app.callback(
Output("graphs", "children"),
Input("template", "value"),
)
def update_graph_theme(template):
graph1 = dmc.Paper(
dcc.Graph(
figure=px.scatter(
iris,
x="sepal_width",
y="sepal_length",
color="species",
title=f"Iris <br>{template} figure template",
template=template,
),
),
shadow="sm",
)
graph2 = dmc.Paper(
dcc.Graph(
figure=px.scatter(
gapminder,
x="gdpPercap",
y="lifeExp",
size="pop",
color="continent",
hover_name="country",
animation_frame="year",
animation_group="country",
log_x=True,
size_max=60,
title=f"Gapminder <br>{template} figure template",
template=template,
),
),
shadow="sm",
)
graph3 = dmc.Paper(
dcc.Graph(
figure=px.violin(
tips,
y="tip",
x="smoker",
color="sex",
box=True,
points="all",
hover_data=tips.columns,
title=f"Tips <br>{template} figure template",
template=template,
),
),
shadow="sm",
)
fig4 = px.scatter_mapbox(
carshare,
lat="centroid_lat",
lon="centroid_lon",
color="peak_hour",
size="car_hours",
size_max=15,
zoom=10,
mapbox_style="carto-positron",
title=f"Carshare <br> {template} figure template",
template=template,
)
fig4.update_layout(margin={"l": 30, "b": 30})
graph4 = dmc.Paper(dcc.Graph(figure=fig4), shadow="sm")
return [graph1, graph2, graph3, graph4]
if __name__ == "__main__":
app.run_server(debug=True)
2 Likes
