0
# Dash Mantine Components
1

2
Dash Mantine Components is an extensive library of over 90 Dash components based on the Mantine React Components Library. It enables developers to create high-quality dashboards and web applications with well-designed components out of the box, serving as a bridge between Python's Dash framework and Mantine's modern React components.
3

4
## Package Information
5

6
- **Package Name**: dash-mantine-components
7
- **Package Type**: Component Library
8
- **Language**: Python
9
- **Installation**: `pip install dash-mantine-components`
10
- **React Version**: Requires React 18.2.0 (set via `dash._dash_renderer._set_react_version('18.2.0')`)
11
- **Version**: 1.3.0
12
- **Components**: 162 components and utilities
13
- **Based on**: Mantine React Components Library v7.17.7
14

15
## Core Imports
16

17
```python
18
import dash_mantine_components as dmc
19
```
20

21
Individual component imports:
22
```python
23
from dash_mantine_components import Button, Text, MantineProvider
24
```
25

26
Theme and utilities:
27
```python
28
from dash_mantine_components import DEFAULT_THEME, add_figure_templates, styles
29
```
30

31
## Basic Usage
32

33
```python
34
import dash
35
from dash import Dash, html, Input, Output, callback
36
import dash_mantine_components as dmc
37

38
# Set React version for compatibility
39
dash._dash_renderer._set_react_version('18.2.0')
40

41
app = Dash(__name__)
42

43
# All components must be wrapped in MantineProvider
44
app.layout = dmc.MantineProvider([
45
    dmc.Container([
46
        dmc.Title("Welcome to Dash Mantine Components", order=1),
47
        dmc.Text("Building beautiful dashboards with ease", size="lg"),
48
        dmc.Button("Click me!", id="demo-button", color="primary"),
49
        dmc.Alert("This is an alert message", color="info"),
50
    ], size="md")
51
])
52

53
@callback(
54
    Output("demo-button", "children"),
55
    Input("demo-button", "n_clicks"),
56
    prevent_initial_call=True
57
)
58
def update_button(n_clicks):
59
    return f"Clicked {n_clicks} times!"
60

61
if __name__ == "__main__":
62
    app.run_server()
63
```
64

65
## Architecture
66

67
### Core Provider System
68
- **MantineProvider**: Required wrapper providing theme context and styling to all components
69
- **Theme System**: Comprehensive theming with light/dark modes, color palettes, typography, and spacing
70
- **Component Categories**: 162+ components organized into logical functional groups
71

72
### Integration Points
73
- **Dash Integration**: Full compatibility with Dash callback system and component properties
74
- **Plotly Integration**: Built-in figure templates for consistent chart styling with Mantine themes
75
- **Async Loading**: Performance-optimized async loading for heavy components (charts, rich text editor)
76

77
## Capabilities
78

79
### Core Layout Components
80

81
Essential building blocks for creating layouts including containers, grids, flexbox systems, and the comprehensive AppShell layout system for application structure.
82

83
```python { .api }
84
# Container and layout
85
def Container(children=None, **kwargs): ...
86
def Box(children=None, **kwargs): ...
87
def Flex(children=None, **kwargs): ...
88
def Stack(children=None, **kwargs): ...
89
def Group(children=None, **kwargs): ...
90
def SimpleGrid(children=None, **kwargs): ...
91

92
# Grid system
93
def Grid(children=None, **kwargs): ...
94
def GridCol(children=None, **kwargs): ...
95

96
# AppShell layout system
97
def AppShell(children=None, **kwargs): ...
98
def AppShellHeader(children=None, **kwargs): ...
99
def AppShellNavbar(children=None, **kwargs): ...
100
def AppShellAside(children=None, **kwargs): ...
101
def AppShellMain(children=None, **kwargs): ...
102
def AppShellFooter(children=None, **kwargs): ...
103
```
104

105
[Core Layout Components](./core-layout.md)
106

107
### Typography Components
108

109
Essential text display components for headings, paragraphs, and formatted text content.
110

111
```python { .api }
112
def Text(children=None, **kwargs): ...
113
def Title(children=None, order=1, **kwargs): ...
114
def Code(children=None, **kwargs): ...
115
def Blockquote(children=None, **kwargs): ...
116
def Mark(children=None, **kwargs): ...
117
def Highlight(children=None, **kwargs): ...
118
def Kbd(children=None, **kwargs): ...
119
```
120

121
### Interactive Components
122

123
Expandable and collapsible interface elements for organizing content.
124

125
```python { .api }
126
# Accordion system
127
def Accordion(children=None, **kwargs): ...
128
def AccordionControl(children=None, **kwargs): ...
129
def AccordionItem(children=None, **kwargs): ...
130
def AccordionPanel(children=None, **kwargs): ...
131

132
# Stepper system
133
def Stepper(children=None, **kwargs): ...
134
def StepperCompleted(children=None, **kwargs): ...
135
def StepperStep(children=None, **kwargs): ...
136

137
# Timeline system
138
def Timeline(children=None, **kwargs): ...
139
def TimelineItem(children=None, **kwargs): ...
140
```
141

142
### Form Controls
143

144
Comprehensive form inputs including text fields, selectors, buttons, checkboxes, sliders, and specialized inputs for building interactive forms and user interfaces.
145

146
```python { .api }
147
# Input components
148
def TextInput(id=None, **kwargs): ...
149
def NumberInput(id=None, **kwargs): ...
150
def PasswordInput(id=None, **kwargs): ...
151
def Textarea(id=None, **kwargs): ...
152

153
# Selection components
154
def Select(id=None, **kwargs): ...
155
def MultiSelect(id=None, **kwargs): ...
156
def Autocomplete(id=None, **kwargs): ...
157

158
# Button components
159
def Button(children=None, id=None, **kwargs): ...
160
def ActionIcon(id=None, **kwargs): ...
161

162
# Choice components
163
def Checkbox(id=None, **kwargs): ...
164
def Radio(id=None, **kwargs): ...
165
def Switch(id=None, **kwargs): ...
166

167
# Slider components
168
def Slider(id=None, **kwargs): ...
169
def RangeSlider(id=None, **kwargs): ...
170
```
171

172
[Form Controls](./forms.md)
173

174
### Data Display Components
175

176
Components for displaying data including tables, lists, images, avatars, and progress indicators for creating informative user interfaces.
177

178
```python { .api }
179
# Table components
180
def Table(children=None, **kwargs): ...
181
def TableTh(children=None, **kwargs): ...
182
def TableTd(children=None, **kwargs): ...
183
def TableScrollContainer(children=None, **kwargs): ...
184

185
# Display components
186
def Avatar(children=None, **kwargs): ...
187
def Image(src=None, **kwargs): ...
188
def Alert(children=None, **kwargs): ...
189
def Badge(children=None, **kwargs): ...
190

191
# Progress components
192
def Progress(value=None, **kwargs): ...
193
def RingProgress(sections=None, **kwargs): ...
194
def Skeleton(**kwargs): ...
195
```
196

197
[Data Display Components](./data-display.md)
198

199
### Navigation Components
200

201
Navigation elements including menus, tabs, breadcrumbs, tooltips, and popovers for creating intuitive user navigation experiences.
202

203
```python { .api }
204
# Menu system
205
def Menu(children=None, **kwargs): ...
206
def MenuItem(children=None, **kwargs): ...
207
def MenuDropdown(children=None, **kwargs): ...
208

209
# Tab system
210
def Tabs(children=None, **kwargs): ...
211
def TabsList(children=None, **kwargs): ...
212
def TabsTab(children=None, **kwargs): ...
213
def TabsPanel(children=None, **kwargs): ...
214

215
# Tooltip and popover
216
def Tooltip(children=None, **kwargs): ...
217
def Popover(children=None, **kwargs): ...
218

219
# Other navigation
220
def Breadcrumbs(children=None, **kwargs): ...
221
def Pagination(value=None, **kwargs): ...
222
```
223

224
[Navigation Components](./navigation.md)
225

226
### Chart Components
227

228
Data visualization components providing various chart types including line charts, bar charts, pie charts, and specialized visualizations for data analysis dashboards.
229

230
```python { .api }
231
def AreaChart(data=None, **kwargs): ...
232
def BarChart(data=None, **kwargs): ...
233
def LineChart(data=None, **kwargs): ...
234
def PieChart(data=None, **kwargs): ...
235
def DonutChart(data=None, **kwargs): ...
236
def ScatterChart(data=None, **kwargs): ...
237
def RadarChart(data=None, **kwargs): ...
238
def BubbleChart(data=None, **kwargs): ...
239
def CompositeChart(data=None, **kwargs): ...
240
def Sparkline(data=None, **kwargs): ...
241
```
242

243
[Chart Components](./charts.md)
244

245
### Date and Time Components
246

247
Specialized components for date and time selection including date pickers, time inputs, and calendar widgets with internationalization support.
248

249
```python { .api }
250
def DatePicker(value=None, **kwargs): ...
251
def DatePickerInput(value=None, **kwargs): ...
252
def DateTimePicker(value=None, **kwargs): ...
253
def TimeInput(value=None, **kwargs): ...
254
def MonthPickerInput(value=None, **kwargs): ...
255
def YearPickerInput(value=None, **kwargs): ...
256
def DatesProvider(children=None, **kwargs): ...
257
```
258

259
[Date and Time Components](./dates.md)
260

261
### Extension Components
262

263
Advanced components including rich text editor, code highlighting, carousel, notifications, and progress indicators for enhanced user experiences.
264

265
```python { .api }
266
# Rich text editing
267
def RichTextEditor(value=None, **kwargs): ...
268

269
# Code highlighting
270
def CodeHighlight(code=None, **kwargs): ...
271
def CodeHighlightTabs(children=None, **kwargs): ...
272
def InlineCodeHighlight(code=None, **kwargs): ...
273

274
# Carousel
275
def Carousel(children=None, **kwargs): ...
276
def CarouselSlide(children=None, **kwargs): ...
277

278
# Notifications
279
def Notification(children=None, **kwargs): ...
280
def NotificationProvider(children=None, **kwargs): ...
281
```
282

283
[Extension Components](./extensions.md)
284

285
### Theme and Styling
286

287
Theme management system with comprehensive color palettes, typography settings, and Plotly integration for consistent styling across applications.
288

289
```python { .api }
290
# Theme provider
291
def MantineProvider(children=None, theme=None, **kwargs): ...
292
def TypographyStylesProvider(children=None, **kwargs): ...
293

294
# Theme constants and utilities
295
DEFAULT_THEME: dict
296
def add_figure_templates(default=None): ...
297
```
298

299
[Theme and Styling](./theme.md)
300

301
## Types
302

303
```python { .api }
304
# Component props - all components accept these base properties
305
class ComponentProps:
306
    id: str  # Component identifier for callbacks
307
    className: str  # CSS class names
308
    style: dict  # Inline styles
309
    children: list  # Child components
310
    
311
# Theme configuration
312
class ThemeConfig:
313
    colors: dict  # Color palette definitions
314
    fontFamily: str  # Primary font family
315
    fontSizes: dict  # Font size scale
316
    spacing: dict  # Spacing scale
317
    radius: dict  # Border radius scale
318
    shadows: dict  # Shadow definitions
319
    breakpoints: dict  # Responsive breakpoints
320
```