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

Overview

Eval results

Files

Theme and Styling

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

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

Capabilities

Theme Provider

Core theming system that provides styling context to all components.

def MantineProvider(
    children=None,  # App components
    theme=None,  # Theme configuration object
    defaultColorScheme="light",  # "light" | "dark" | "auto"
    **kwargs
): 
    """
    Root theme provider for Mantine components.
    
    Parameters:
    - children: All application components must be wrapped
    - theme: Theme configuration object (uses DEFAULT_THEME if None)
    - defaultColorScheme: Default color scheme
    """

def TypographyStylesProvider(
    children=None,  # Content with typography
    **kwargs
): 
    """
    Provider for rich typography styles in user content.
    
    Parameters:
    - children: Content that needs typography styling
    """

Default Theme Configuration

Complete theme object with all styling definitions.

DEFAULT_THEME: dict = {
    # Core theme properties
    "scale": 1,
    "fontSmoothing": True,
    "focusRing": "auto",
    "white": "#fff",
    "black": "#000",
    
    # Color system
    "colors": {
        "dark": [...],  # Dark theme colors [0-9]
        "gray": [...],  # Gray scale [0-9]
        "red": [...],   # Red palette [0-9]
        "pink": [...],  # Pink palette [0-9]
        "grape": [...], # Grape/purple palette [0-9]
        "violet": [...],# Violet palette [0-9]
        "indigo": [...],# Indigo palette [0-9]
        "blue": [...],  # Blue palette [0-9]
        "cyan": [...],  # Cyan palette [0-9]
        "teal": [...],  # Teal palette [0-9]
        "green": [...], # Green palette [0-9]
        "lime": [...],  # Lime palette [0-9]
        "yellow": [...],# Yellow palette [0-9]
        "orange": [...] # Orange palette [0-9]
    },
    
    # Primary color configuration
    "primaryShade": {"light": 6, "dark": 8},
    "primaryColor": "blue",
    "autoContrast": False,
    "luminanceThreshold": 0.3,
    
    # Typography
    "fontFamily": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, ...",
    "fontFamilyMonospace": "ui-monospace, SFMono-Regular, Menlo, Monaco, ...",
    "fontSizes": {
        "xs": "calc(0.75rem * var(--mantine-scale))",
        "sm": "calc(0.875rem * var(--mantine-scale))",
        "md": "calc(1rem * var(--mantine-scale))",
        "lg": "calc(1.125rem * var(--mantine-scale))",
        "xl": "calc(1.25rem * var(--mantine-scale))"
    },
    "lineHeights": {
        "xs": "1.4", "sm": "1.45", "md": "1.55", "lg": "1.6", "xl": "1.65"
    },
    
    # Spacing system
    "spacing": {
        "xs": "calc(0.625rem * var(--mantine-scale))",
        "sm": "calc(0.75rem * var(--mantine-scale))",
        "md": "calc(1rem * var(--mantine-scale))",
        "lg": "calc(1.25rem * var(--mantine-scale))",
        "xl": "calc(2rem * var(--mantine-scale))"
    },
    
    # Border radius
    "radius": {
        "xs": "calc(0.125rem * var(--mantine-scale))",
        "sm": "calc(0.25rem * var(--mantine-scale))",
        "md": "calc(0.5rem * var(--mantine-scale))",
        "lg": "calc(1rem * var(--mantine-scale))",
        "xl": "calc(2rem * var(--mantine-scale))"
    },
    
    # Responsive breakpoints
    "breakpoints": {
        "xs": "36em", "sm": "48em", "md": "62em", "lg": "75em", "xl": "88em"
    },
    
    # Shadow system
    "shadows": {
        "xs": "0 calc(0.0625rem * var(--mantine-scale)) ...",
        "sm": "0 calc(0.0625rem * var(--mantine-scale)) ...",
        "md": "0 calc(0.0625rem * var(--mantine-scale)) ...",
        "lg": "0 calc(0.0625rem * var(--mantine-scale)) ...",
        "xl": "0 calc(0.0625rem * var(--mantine-scale)) ..."
    },
    
    # Heading configuration
    "headings": {
        "fontFamily": "-apple-system, BlinkMacSystemFont, ...",
        "fontWeight": "700",
        "textWrap": "wrap",
        "sizes": {
            "h1": {"fontSize": "calc(2.125rem * var(--mantine-scale))", "lineHeight": "1.3"},
            "h2": {"fontSize": "calc(1.625rem * var(--mantine-scale))", "lineHeight": "1.35"},
            "h3": {"fontSize": "calc(1.375rem * var(--mantine-scale))", "lineHeight": "1.4"},
            "h4": {"fontSize": "calc(1.125rem * var(--mantine-scale))", "lineHeight": "1.45"},
            "h5": {"fontSize": "calc(1rem * var(--mantine-scale))", "lineHeight": "1.5"},
            "h6": {"fontSize": "calc(0.875rem * var(--mantine-scale))", "lineHeight": "1.5"}
        }
    },
    
    # Other configurations
    "respectReducedMotion": False,
    "cursorType": "default",
    "defaultGradient": {"from": "blue", "to": "cyan", "deg": 45},
    "defaultRadius": "sm",
    "activeClassName": "mantine-active",
    "focusClassName": "",
    "other": {},
    "components": {}
}
"""
Complete Mantine theme configuration with all styling properties.
Includes color palettes, typography, spacing, shadows, and component defaults.
"""

Plotly Integration

Figure template utilities for consistent chart styling.

def add_figure_templates(default=None):
    """
    Create and register Plotly figure templates styled to match Mantine theme.
    
    Creates two templates:
    - "mantine_light": Light mode styling
    - "mantine_dark": Dark mode styling
    
    Parameters:
    - default: str, optional
        Set default template ("mantine_light" or "mantine_dark")
        If None, default Plotly template unchanged
        
    Returns:
    - None: Templates registered with plotly.io.templates
    
    Raises:
    - ValueError: If default is not a valid template name
    
    Usage:
    - add_figure_templates()  # Register templates
    - add_figure_templates("mantine_light")  # Set as default
    """

Legacy Styles Module

Backward compatibility module for older versions.

# Style constants (backward compatibility)
styles.ALL: list = []  # Empty list, CSS now bundled
styles.DATES: str = ""  # Empty string
styles.CODE_HIGHLIGHT: str = ""
styles.CHARTS: str = ""
styles.CAROUSEL: str = ""
styles.NOTIFICATIONS: str = ""
styles.NPROGRESS: str = ""
styles.RICH_TEXT_EDITOR: str = ""
"""
Legacy style imports for backward compatibility.
As of v1.2.0, CSS is bundled with components.
"""

Theme Configuration Types

# Color palette structure (10 shades per color)
ColorPalette = List[str]  # ["#lightest", ..., "#darkest"]

# Complete color system
ColorSystem = Dict[str, ColorPalette]  # {"blue": [...], "red": [...]}

# Size scale for spacing, fonts, etc.
SizeScale = Dict[str, str]  # {"xs": "0.5rem", "sm": "0.75rem", ...}

# Responsive breakpoint configuration
Breakpoints = Dict[str, str]  # {"xs": "36em", "sm": "48em", ...}

# Theme configuration object
class ThemeConfig:
    colors: ColorSystem
    primaryColor: str
    primaryShade: Dict[str, int]  # {"light": 6, "dark": 8}
    fontFamily: str
    fontSizes: SizeScale
    spacing: SizeScale
    radius: SizeScale
    shadows: SizeScale
    breakpoints: Breakpoints
    headings: Dict[str, Any]
    # ... other theme properties

Usage Examples

Basic Theme Setup

import dash_mantine_components as dmc

# Basic app with default theme
app.layout = dmc.MantineProvider([
    dmc.Container([
        dmc.Title("My App", order=1),
        dmc.Text("Styled with default Mantine theme"),
        dmc.Button("Primary Button", color="blue")
    ])
])

Custom Theme Configuration

# Custom theme extending default
custom_theme = {
    **dmc.DEFAULT_THEME,  # Start with default theme
    "primaryColor": "teal",  # Change primary color
    "fontFamily": "Inter, -apple-system, sans-serif",  # Custom font
    "components": {
        "Button": {
            "styles": {
                "root": {
                    "fontWeight": 600,
                    "borderRadius": "8px"
                }
            }
        }
    }
}

app.layout = dmc.MantineProvider([
    # Your app content
], theme=custom_theme)

Dark Mode Support

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

# App with theme switching
app.layout = dmc.MantineProvider([
    dmc.Container([
        dmc.Group([
            dmc.Title("Theme Demo"),
            dmc.Switch(
                id="color-scheme-switch",
                label="Dark Mode",
                size="lg"
            )
        ], position="apart"),
        
        dmc.Paper([
            dmc.Text("This content adapts to the theme"),
            dmc.Button("Themed Button")
        ], p="md", shadow="sm")
    ])
], id="theme-provider", defaultColorScheme="light")

@callback(
    Output("theme-provider", "forceColorScheme"),
    Input("color-scheme-switch", "checked")
)
def switch_theme(checked):
    return "dark" if checked else "light"

Plotly Chart Integration

import dash_mantine_components as dmc
import plotly.express as px

# Setup Mantine figure templates
dmc.add_figure_templates("mantine_light")

# Create chart with Mantine styling
df = px.data.iris()
fig = px.scatter(
    df, x="sepal_width", y="sepal_length", 
    color="species", template="mantine_light"
)

chart_layout = dmc.MantineProvider([
    dmc.Container([
        dmc.Title("Chart with Mantine Theme"),
        dmc.Paper([
            dcc.Graph(figure=fig)
        ], p="md", shadow="sm")
    ])
])

Responsive Design with Breakpoints

# Responsive layout using theme breakpoints
responsive_layout = dmc.Container([
    dmc.SimpleGrid([
        dmc.Paper("Item 1", p="md"),
        dmc.Paper("Item 2", p="md"), 
        dmc.Paper("Item 3", p="md"),
        dmc.Paper("Item 4", p="md")
    ], 
    # Responsive columns using theme breakpoints
    cols={"base": 1, "sm": 2, "md": 3, "lg": 4},
    spacing="md")
])

Typography Styling

# Rich typography content
typography_demo = dmc.TypographyStylesProvider([
    dmc.Container([
        # This HTML content will be styled with Mantine typography
        html.Div([
            html.H1("Main Heading"),
            html.H2("Subheading"),
            html.P("This is a paragraph with styled typography."),
            html.Ul([
                html.Li("List item 1"),
                html.Li("List item 2")
            ]),
            html.Blockquote("This is a styled blockquote.")
        ])
    ])
])

Color System Usage

# Using theme colors in components
color_demo = dmc.Stack([
    dmc.Group([
        dmc.Button("Blue", color="blue"),
        dmc.Button("Green", color="green"),
        dmc.Button("Red", color="red"),
        dmc.Button("Orange", color="orange")
    ]),
    
    dmc.Group([
        dmc.Badge("Info", color="blue", variant="light"),
        dmc.Badge("Success", color="green", variant="light"),
        dmc.Badge("Warning", color="yellow", variant="light"),
        dmc.Badge("Error", color="red", variant="light")
    ]),
    
    # Direct color usage
    dmc.Text("Custom colored text", c="teal.6"),  # teal shade 6
    dmc.Paper("Colored background", bg="gray.1", p="md")
])

Install with Tessl CLI

npx tessl i tessl/pypi-dash-mantine-components

docs