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
data-display.mddocs/
Data Display Components
Components for displaying data including tables, lists, images, avatars, and progress indicators for creating informative user interfaces.
Capabilities
Table Components
Comprehensive table system for displaying structured data with styling and interaction features.
def Table(
children=None, # Table content (thead, tbody, tfoot)
striped=False, # Alternate row colors
highlightOnHover=False, # Highlight rows on hover
withBorder=False, # Add table border
withColumnBorders=False, # Add column borders
captionSide="top", # "top" | "bottom"
fontSize="sm", # Table font size
**kwargs
):
"""
Main table container component.
Parameters:
- children: Table sections (TableThead, TableTbody, etc.)
- striped: Alternate row background colors
- highlightOnHover: Highlight rows on mouse hover
- withBorder: Add outer border
- withColumnBorders: Add vertical column borders
- captionSide: Caption position
- fontSize: Text size for table
"""
def TableThead(
children=None, # Table header rows
**kwargs
):
"""
Table header section.
Parameters:
- children: TableTr components with TableTh cells
"""
def TableTbody(
children=None, # Table body rows
**kwargs
):
"""
Table body section.
Parameters:
- children: TableTr components with TableTd cells
"""
def TableTfoot(
children=None, # Table footer rows
**kwargs
):
"""
Table footer section.
Parameters:
- children: TableTr components
"""
def TableTr(
children=None, # Table cells
**kwargs
):
"""
Table row component.
Parameters:
- children: TableTh or TableTd components
"""
def TableTh(
children=None, # Header cell content
**kwargs
):
"""
Table header cell.
Parameters:
- children: Cell content
"""
def TableTd(
children=None, # Data cell content
**kwargs
):
"""
Table data cell.
Parameters:
- children: Cell content
"""
def TableCaption(
children=None, # Caption text
**kwargs
):
"""
Table caption component.
Parameters:
- children: Caption content
"""
def TableScrollContainer(
children=None, # Table component
minWidth=None, # Minimum width before scrolling
**kwargs
):
"""
Scrollable container for tables.
Parameters:
- children: Table component
- minWidth: Minimum width to trigger horizontal scroll
"""Avatar and Image Components
Components for displaying user avatars, images, and visual content.
def Avatar(
children=None, # Avatar content (initials/icon)
src=None, # Image source URL
alt="", # Alt text
size="md", # Avatar size
radius="sm", # Border radius
color="blue", # Background color
**kwargs
):
"""
User avatar component with fallback support.
Parameters:
- children: Fallback content (initials, icon)
- src: Avatar image URL
- alt: Image alt text
- size: Avatar size
- radius: Border radius
- color: Background color for fallback
"""
def AvatarGroup(
children=None, # Avatar components
spacing="sm", # Space between avatars
**kwargs
):
"""
Group of overlapping avatars.
Parameters:
- children: List of Avatar components
- spacing: Overlap spacing (negative values create overlap)
"""
def Image(
src=None, # Image source URL
alt="", # Alt text
width=None, # Image width
height=None, # Image height
fit="cover", # Object fit behavior
radius="sm", # Border radius
fallbackSrc=None, # Fallback image URL
**kwargs
):
"""
Responsive image component with fallback support.
Parameters:
- src: Image source URL
- alt: Alternative text
- width: Image width
- height: Image height
- fit: CSS object-fit property
- radius: Border radius
- fallbackSrc: Fallback image if src fails
"""
def BackgroundImage(
children=None, # Overlay content
src=None, # Background image URL
radius="sm", # Border radius
**kwargs
):
"""
Container with background image.
Parameters:
- children: Content to overlay on image
- src: Background image URL
- radius: Border radius
"""Progress and Loading Components
Components for showing progress, loading states, and status indicators.
def Progress(
value=0, # Progress value (0-100)
color="blue", # Progress color
size="md", # Progress bar size
radius="sm", # Border radius
striped=False, # Striped animation
animate=False, # Animate stripes
label=None, # Progress label
**kwargs
):
"""
Linear progress bar component.
Parameters:
- value: Progress percentage (0-100)
- color: Progress bar color
- size: Bar thickness
- radius: Border radius
- striped: Show striped pattern
- animate: Animate stripes
- label: Text label overlay
"""
def RingProgress(
sections=[], # Progress sections
size=120, # Ring diameter
thickness=12, # Ring thickness
roundCaps=False, # Round line caps
label=None, # Center label
**kwargs
):
"""
Circular progress ring component.
Parameters:
- sections: List of progress sections with value and color
- size: Ring diameter in pixels
- thickness: Ring thickness
- roundCaps: Use rounded line caps
- label: Content in center of ring
"""
def SemiCircleProgress(
value=0, # Progress value (0-100)
color="blue", # Progress color
size=200, # Component size
thickness=12, # Arc thickness
label=None, # Center label
**kwargs
):
"""
Semi-circular progress component.
Parameters:
- value: Progress percentage (0-100)
- color: Progress arc color
- size: Component diameter
- thickness: Arc thickness
- label: Center label content
"""
def Loader(
color="blue", # Loader color
size="md", # Loader size
variant="oval", # Loader animation type
**kwargs
):
"""
Loading spinner component.
Parameters:
- color: Spinner color
- size: Spinner size
- variant: Animation style ("oval", "bars", "dots")
"""
def LoadingOverlay(
visible=False, # Overlay visibility
overlayBlur=2, # Background blur amount
loaderProps=None, # Loader configuration
**kwargs
):
"""
Full overlay with loading spinner.
Parameters:
- visible: Whether overlay is shown
- overlayBlur: Background blur intensity
- loaderProps: Properties for internal Loader component
"""
def Skeleton(
height="auto", # Skeleton height
width="100%", # Skeleton width
radius="sm", # Border radius
animate=True, # Animate placeholder
**kwargs
):
"""
Loading placeholder skeleton.
Parameters:
- height: Skeleton height
- width: Skeleton width
- radius: Border radius
- animate: Show shimmer animation
"""Alert and Status Components
Components for displaying alerts, badges, and status information.
def Alert(
children=None, # Alert content
title=None, # Alert title
color="blue", # Alert color theme
variant="light", # "light" | "filled" | "outline"
radius="sm", # Border radius
icon=None, # Alert icon
withCloseButton=False, # Show close button
**kwargs
):
"""
Alert message component.
Parameters:
- children: Alert message content
- title: Alert title text
- color: Color theme
- variant: Alert style
- radius: Border radius
- icon: Icon element
- withCloseButton: Show dismissal button
"""
def Badge(
children=None, # Badge content
color="blue", # Badge color
variant="light", # "light" | "filled" | "outline" | "dot"
size="md", # Badge size
radius="xl", # Border radius
leftSection=None, # Left side content
rightSection=None, # Right side content
**kwargs
):
"""
Status badge component.
Parameters:
- children: Badge text content
- color: Badge color theme
- variant: Badge style
- size: Badge size
- radius: Border radius
- leftSection: Content on left side
- rightSection: Content on right side
"""
def Indicator(
children=None, # Content to indicate
color="red", # Indicator color
size=10, # Indicator size
radius="xl", # Border radius
disabled=False, # Hide indicator
position="top-end", # Indicator position
offset=5, # Position offset
**kwargs
):
"""
Notification indicator component.
Parameters:
- children: Content to wrap with indicator
- color: Indicator dot color
- size: Indicator size
- radius: Border radius
- disabled: Hide indicator dot
- position: Indicator position relative to content
- offset: Position offset in pixels
"""List Components
Components for displaying lists of items with consistent formatting.
def List(
children=None, # List items
type="unordered", # "ordered" | "unordered"
withPadding=False, # Add internal padding
size="sm", # List font size
spacing="sm", # Space between items
center=False, # Center list items
icon=None, # Custom bullet icon
**kwargs
):
"""
List container component.
Parameters:
- children: ListItem components
- type: List type (ordered/unordered)
- withPadding: Add padding around list
- size: Font size
- spacing: Space between items
- center: Center-align items
- icon: Custom bullet icon
"""
def ListItem(
children=None, # Item content
icon=None, # Item-specific icon
**kwargs
):
"""
Individual list item.
Parameters:
- children: Item content
- icon: Override list icon for this item
"""Scrollable Areas
Component for creating custom scrollable regions.
def ScrollArea(
children=None, # Scrollable content
h=None, # Container height
mah=None, # Maximum height
type="hover", # "hover" | "scroll" | "always" | "never"
offsetScrollbars=False, # Offset content from scrollbars
scrollbarSize=12, # Scrollbar thickness
**kwargs
):
"""
Custom scrollable area component.
Parameters:
- children: Content to make scrollable
- h: Fixed height
- mah: Maximum height
- type: Scrollbar visibility behavior
- offsetScrollbars: Offset content to prevent layout shift
- scrollbarSize: Scrollbar thickness in pixels
"""Usage Examples
Data Table
import dash_mantine_components as dmc
table = dmc.TableScrollContainer([
dmc.Table([
dmc.TableThead([
dmc.TableTr([
dmc.TableTh("Name"),
dmc.TableTh("Email"),
dmc.TableTh("Status"),
dmc.TableTh("Actions")
])
]),
dmc.TableTbody([
dmc.TableTr([
dmc.TableTd("John Doe"),
dmc.TableTd("john@example.com"),
dmc.TableTd([
dmc.Badge("Active", color="green", variant="light")
]),
dmc.TableTd([
dmc.ActionIcon("✏️", variant="subtle"),
dmc.ActionIcon("🗑️", variant="subtle", color="red")
])
]),
dmc.TableTr([
dmc.TableTd("Jane Smith"),
dmc.TableTd("jane@example.com"),
dmc.TableTd([
dmc.Badge("Inactive", color="gray", variant="light")
]),
dmc.TableTd([
dmc.ActionIcon("✏️", variant="subtle"),
dmc.ActionIcon("🗑️", variant="subtle", color="red")
])
])
])
], striped=True, highlightOnHover=True)
], minWidth=600)Progress Indicators
progress_demo = dmc.Stack([
dmc.Text("Linear Progress", weight=500),
dmc.Progress(value=65, color="blue", size="lg"),
dmc.Text("Ring Progress", weight=500, mt="md"),
dmc.RingProgress(
sections=[
{"value": 40, "color": "cyan"},
{"value": 25, "color": "orange"},
{"value": 15, "color": "grape"}
],
label=dmc.Text("80%", ta="center", weight=700)
),
dmc.Text("Loading States", weight=500, mt="md"),
dmc.Group([
dmc.Loader(variant="oval"),
dmc.Loader(variant="bars", color="orange"),
dmc.Loader(variant="dots", color="grape")
])
])Content Display
content = dmc.Stack([
dmc.Group([
dmc.Avatar("JD", color="blue", size="lg"),
dmc.Stack([
dmc.Text("John Doe", weight=500),
dmc.Text("Software Developer", size="sm", c="dimmed")
], spacing="xs")
]),
dmc.Alert(
"This is an informational alert with an icon.",
title="Information",
color="blue",
icon="ℹ️"
),
dmc.List([
dmc.ListItem("First item"),
dmc.ListItem("Second item"),
dmc.ListItem("Third item")
], type="ordered")
])Install with Tessl CLI
npx tessl i tessl/pypi-dash-mantine-components