Hey @snehilvj - This new release is Awseome 
Thanks for all the work you do on dash-mantine-components. It’s an amazing library!
I just wanted to provide a little more information on some of the cool new features in this release.
As Snehil mentioned, there are some breaking changes to props, propnames and components in this release. These changes provide great new features – and make it so the library keeps up with the underlying Mantine library which is undergoing rapid development. If you are using dash-mantine-componets in production, be sure to pin your current version until you are ready to upgrade.
You can find the official version of the docs here (currently 0.10.2):
And the Latest alpha release (0.11.0a0) here:
Note that this is a temporary link for the alpha release and it may not be available in the future.
You’ll see the biggest breaking changes in the Accordion, Tabs and RadioGroup components.
These components are now made up of subcomponents to make them more customizable.
For example, you can use style props such as p, px, mx, etc. on each of the sub component along with className, and id. Since each sub-component has a children prop, it makes it easy to add things like images and icons and other components.
For Dash it also means that you will be able to write callback on each sub component. 
Accordion
The new version of the dbc.Accordion now has dbc.AccordionControl component for the label,
and the dbc.AccordionPanel component for the content. This allow for a lot more customization of the Accordion.
Basic Example
New way in 0.11.0a0
dmc.Accordion(
children=[
dmc.AccordionItem(
[
dmc.AccordionControl("Customization"),
dmc.AccordionPanel(
"Colors, fonts, shadows and many other parts are customizable to fit your design needs"
),
],
),
dmc.AccordionItem(
[
dmc.AccordionControl("Flexibility"),
dmc.AccordionPanel(
"Configure temp appearance and behavior with vast amount of settings or overwrite any part of "
"component styles "
),
],
),
],
)
Old way - Version <0.10.2
dmc.Accordion(
children=[
dmc.AccordionItem(
"Colors, fonts, shadows and many other parts are customizable to fit your design needs",
label="Customization",
),
dmc.AccordionItem(
"Configure temp appearance and behavior with vast amount of settings or overwrite any part of component "
"styles",
label="Flexibility",
),
],
)
Accordion example with components
import dash_mantine_components as dmc
from dash import Dash
app = Dash(__name__)
def content(title, pct):
return dmc.Grid(
children=[
dmc.Col(dmc.Text(f"{title}", weight=700), span=2 ),
dmc.Col(dmc.Text(f"{pct}% budget used", align="center"), span=3),
dmc.Col(dmc.Progress(value=pct, label=f"{pct}", size="xl", color="green"), span=7 ),
],
gutter="sm",
)
accordion = dmc.Accordion(
dmc.AccordionItem(
[
dmc.AccordionControl(content("Transportation", 25)),
dmc.AccordionPanel([content("Trains", 40), content("Planes", 75), content("Automobiles", 30)])
],
value="1"
),
)
app.layout= dmc.Container(accordion)
if __name__ == "__main__":
app.run(debug=True)
New prop for Accordion: variant
variant="separated" is great for FAQ
faq = dmc.Accordion(
children=[
dmc.AccordionItem(
[
dmc.AccordionControl("How Can I reset my password"),
dmc.AccordionPanel(
"Answer here"
),
],
value="password",
),
dmc.AccordionItem(
[
dmc.AccordionControl("How to I update my credit card on file"),
dmc.AccordionPanel(
"Answer here"
),
],
value="creditcard",
),
],
variant="separated"
)
Tabs
Tabs is now made up of dmc.TabsList which has dmc.Tabs as children. The dmc.Tabs give you fine control of styling each individual tab. This makes it super easy to include things like image and icons.
Be sure to check out all the ways you can customize the tabs in the new docs Tabs section
New way in 0.11.0a0
dmc.Tabs(
[
dmc.TabsList(
[
dmc.Tab("Gallery", value="gallery"),
dmc.Tab("Messages", value="messages"),
dmc.Tab("Settings", value="settings"),
]
),
dmc.TabsPanel("Gallery tab content", value="gallery"),
dmc.TabsPanel("Messages tab content", value="messages"),
dmc.TabsPanel("Settings tab content", value="settings"),
],
color="red",
orientation="vertical",
)
Version <0.10.2
dmc.Tabs(
color="red",
orientation="vertical",
children=[
dmc.Tab(label="Gallery", children=["Gallery tab content"]),
dmc.Tab(label="Messages", children=["Messages tab content"]),
dmc.Tab(label="Settings", children=["Settings tab content"]),
]
)
RadioGroup
The RadioGroup is now composed of the dmc.RadioGroup and dmc.Radio components - making it possible to customize each radio button in the group.
New way in 0.11.0a0
data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]
dmc.RadioGroup(
[dmc.Radio(l, value=k) for k, l in data],
id="radiogroup-simple",
value="react",
label="Select your favorite framework/library",
size="sm",
mt=10,
)
Version <0.10.2
dmc.RadioGroup(
id="radiogroup",
data=[
{"value": "react", "label": "React"},
{"value": "ng", "label": "Angular"},
{"value": "svelte", "label": "Svelte"},
{"value": "vue", "label": "Vue"},
],
value="react",
label="Select your favorite framework/library",
size="sm",
),
dmc.Space(h=10),
dmc.Text(id="radio-output"),
New Components
Aside, Footer
- These work the same as the Navbar, but are in different positions. You can see this in action in the new docs. See the code
Simple example: (by Snehil)
from dash import Dash
from dash_iconify import DashIconify
import dash_mantine_components as dmc
app = Dash(__name__)
app.layout = dmc.Container(
fluid=True,
children=[
# add top navigation
dmc.Header("Title", fixed=True, height=70, p="md"),
# add left side pane
dmc.Navbar(
"Side nav", fixed=True, width={"base": 300}, position={"top": 70}, p="md"
),
# add right side pane
dmc.Aside(
"Table of contents",
fixed=True,
width={"base": 300},
position={"top": 70, "right": 0},
p="md",
),
# add bottom section
dmc.Footer("Footer", fixed=True, height=70, p="md"),
],
)
if __name__ == "__main__":
app.run_server(debug=True)
New Props
There are many, many new props for new functionality and for styling. Best to check with the docs
Take the new release for a spin! When you find cool new stuff, feel free to share an example here