wcswcswcs / dash-mantine-components

Dash components based on Mantine React Components

dmc

Dash Mantine Components

dash-mantine-components is an extensive (40+) 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.

Live Demo

dash-mantine-components.mp4

Installation

pip install dash-mantine-components

Available Components

• Accordion
• Affix
• Alert
• Anchor
• Badge
• Blockquote
• Breadcrumbs
• Button
• Center
• Checkbox
• Chips
• Col
• Container
• DatePicker
• DateRangePicker
• Divider
• Drawer
• Grid
• Group
• Image
• Modal
• MultiSelect
• NotificationsProvider
• Paper
• Prism
• Progress
• RadioGroup
• SegmentedControl
• Select
• SimpleGrid
• Skeleton
• Slider
• Space
• Spoiler
• Switch
• Table
• Tab
• Tabs
• Text
• TextInput
• Title
• Tooltip

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)

TODO:

1. Add more components from Mantine library and enhance already added ones.
2. Create documentation.
3. Support dark theme.
4. Create more examples.
5. Add contributing guide.
6. Add testing.
7. Correct proptypes to support type hints.