tessl/pypi-dash-mantine-components

Plotly Dash Components based on the Mantine React Components Library, providing over 90 high-quality UI components for building dashboards and web applications.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Dash Mantine Components

Name: tessl/pypi-dash-mantine-components
Author: tessl

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.

Package Information

Package Name: dash-mantine-components
Package Type: Component Library
Language: Python
Installation: pip install dash-mantine-components
React Version: Requires React 18.2.0 (set via dash._dash_renderer._set_react_version('18.2.0'))
Version: 1.3.0
Components: 162 components and utilities
Based on: Mantine React Components Library v7.17.7

Core Imports

import dash_mantine_components as dmc

Individual component imports:

from dash_mantine_components import Button, Text, MantineProvider

Theme and utilities:

from dash_mantine_components import DEFAULT_THEME, add_figure_templates, styles

Basic Usage

import dash
from dash import Dash, html, Input, Output, callback
import dash_mantine_components as dmc

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

app = Dash(__name__)

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

@callback(
    Output("demo-button", "children"),
    Input("demo-button", "n_clicks"),
    prevent_initial_call=True
)
def update_button(n_clicks):
    return f"Clicked {n_clicks} times!"

if __name__ == "__main__":
    app.run_server()

Architecture

Core Provider System

MantineProvider: Required wrapper providing theme context and styling to all components
Theme System: Comprehensive theming with light/dark modes, color palettes, typography, and spacing
Component Categories: 162+ components organized into logical functional groups

Integration Points

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

Capabilities

Core Layout Components

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

# Container and layout
def Container(children=None, **kwargs): ...
def Box(children=None, **kwargs): ...
def Flex(children=None, **kwargs): ...
def Stack(children=None, **kwargs): ...
def Group(children=None, **kwargs): ...
def SimpleGrid(children=None, **kwargs): ...

# Grid system
def Grid(children=None, **kwargs): ...
def GridCol(children=None, **kwargs): ...

# AppShell layout system
def AppShell(children=None, **kwargs): ...
def AppShellHeader(children=None, **kwargs): ...
def AppShellNavbar(children=None, **kwargs): ...
def AppShellAside(children=None, **kwargs): ...
def AppShellMain(children=None, **kwargs): ...
def AppShellFooter(children=None, **kwargs): ...

Core Layout Components

Typography Components

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

def Text(children=None, **kwargs): ...
def Title(children=None, order=1, **kwargs): ...
def Code(children=None, **kwargs): ...
def Blockquote(children=None, **kwargs): ...
def Mark(children=None, **kwargs): ...
def Highlight(children=None, **kwargs): ...
def Kbd(children=None, **kwargs): ...

Interactive Components

Expandable and collapsible interface elements for organizing content.

# Accordion system
def Accordion(children=None, **kwargs): ...
def AccordionControl(children=None, **kwargs): ...
def AccordionItem(children=None, **kwargs): ...
def AccordionPanel(children=None, **kwargs): ...

# Stepper system
def Stepper(children=None, **kwargs): ...
def StepperCompleted(children=None, **kwargs): ...
def StepperStep(children=None, **kwargs): ...

# Timeline system
def Timeline(children=None, **kwargs): ...
def TimelineItem(children=None, **kwargs): ...

Form Controls

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

# Input components
def TextInput(id=None, **kwargs): ...
def NumberInput(id=None, **kwargs): ...
def PasswordInput(id=None, **kwargs): ...
def Textarea(id=None, **kwargs): ...

# Selection components
def Select(id=None, **kwargs): ...
def MultiSelect(id=None, **kwargs): ...
def Autocomplete(id=None, **kwargs): ...

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

# Choice components
def Checkbox(id=None, **kwargs): ...
def Radio(id=None, **kwargs): ...
def Switch(id=None, **kwargs): ...

# Slider components
def Slider(id=None, **kwargs): ...
def RangeSlider(id=None, **kwargs): ...

Form Controls

Data Display Components

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

# Table components
def Table(children=None, **kwargs): ...
def TableTh(children=None, **kwargs): ...
def TableTd(children=None, **kwargs): ...
def TableScrollContainer(children=None, **kwargs): ...

# Display components
def Avatar(children=None, **kwargs): ...
def Image(src=None, **kwargs): ...
def Alert(children=None, **kwargs): ...
def Badge(children=None, **kwargs): ...

# Progress components
def Progress(value=None, **kwargs): ...
def RingProgress(sections=None, **kwargs): ...
def Skeleton(**kwargs): ...

Data Display Components

Navigation Components

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

# Menu system
def Menu(children=None, **kwargs): ...
def MenuItem(children=None, **kwargs): ...
def MenuDropdown(children=None, **kwargs): ...

# Tab system
def Tabs(children=None, **kwargs): ...
def TabsList(children=None, **kwargs): ...
def TabsTab(children=None, **kwargs): ...
def TabsPanel(children=None, **kwargs): ...

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

# Other navigation
def Breadcrumbs(children=None, **kwargs): ...
def Pagination(value=None, **kwargs): ...

Navigation Components

Chart Components

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

def AreaChart(data=None, **kwargs): ...
def BarChart(data=None, **kwargs): ...
def LineChart(data=None, **kwargs): ...
def PieChart(data=None, **kwargs): ...
def DonutChart(data=None, **kwargs): ...
def ScatterChart(data=None, **kwargs): ...
def RadarChart(data=None, **kwargs): ...
def BubbleChart(data=None, **kwargs): ...
def CompositeChart(data=None, **kwargs): ...
def Sparkline(data=None, **kwargs): ...

Chart Components

Date and Time Components

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

def DatePicker(value=None, **kwargs): ...
def DatePickerInput(value=None, **kwargs): ...
def DateTimePicker(value=None, **kwargs): ...
def TimeInput(value=None, **kwargs): ...
def MonthPickerInput(value=None, **kwargs): ...
def YearPickerInput(value=None, **kwargs): ...
def DatesProvider(children=None, **kwargs): ...

Date and Time Components

Extension Components

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

# Rich text editing
def RichTextEditor(value=None, **kwargs): ...

# Code highlighting
def CodeHighlight(code=None, **kwargs): ...
def CodeHighlightTabs(children=None, **kwargs): ...
def InlineCodeHighlight(code=None, **kwargs): ...

# Carousel
def Carousel(children=None, **kwargs): ...
def CarouselSlide(children=None, **kwargs): ...

# Notifications
def Notification(children=None, **kwargs): ...
def NotificationProvider(children=None, **kwargs): ...

Extension Components

Theme and Styling

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

# Theme provider
def MantineProvider(children=None, theme=None, **kwargs): ...
def TypographyStylesProvider(children=None, **kwargs): ...

# Theme constants and utilities
DEFAULT_THEME: dict
def add_figure_templates(default=None): ...

Theme and Styling

Types

# Component props - all components accept these base properties
class ComponentProps:
    id: str  # Component identifier for callbacks
    className: str  # CSS class names
    style: dict  # Inline styles
    children: list  # Child components
    
# Theme configuration
class ThemeConfig:
    colors: dict  # Color palette definitions
    fontFamily: str  # Primary font family
    fontSizes: dict  # Font size scale
    spacing: dict  # Spacing scale
    radius: dict  # Border radius scale
    shadows: dict  # Shadow definitions
    breakpoints: dict  # Responsive breakpoints

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:pypi/dash-mantine-components@1.3.x
Publish Source: CLI
Badge