dmc-pip-drawer

A glass morphism Drawer + ScrollArea component for Dash Mantine Components.

Features

• Single-scroll-overlay pattern — no double scrollbars
• Glass morphism scrollbar — Apple-inspired frosted glass effect
• Controllable glass opacity — glass_opacity prop (0.0 transparent → 1.0 opaque)
• Dark mode support — automatic adaptation
• Mobile-first — bottom drawer, responsive scrollbar sizing
• Zero JS — pure Python composition, no build step

Installation

pip install dmc-pip-drawer

Quick Start

from dash import Dash, callback, Output, Input
import dash_mantine_components as dmc
from dmc_pip_drawer import PipDrawer

app = Dash(__name__)

app.layout = dmc.MantineProvider(
    children=[
        dmc.Button("Open Drawer", id="open-btn"),
        PipDrawer(
            id="my-drawer",
            title="My Panel",
            glass_opacity=0.85,
            children=[
                dmc.Text("Hello from PipDrawer!"),
                # Add enough content to scroll...
            ],
        ),
    ]
)

@callback(
    Output("my-drawer", "opened"),
    Input("open-btn", "n_clicks"),
    prevent_initial_call=True,
)
def open_drawer(n):
    return True

if __name__ == "__main__":
    app.run(debug=True)

Note: Copy pip_drawer.css to your assets/ folder, or it ships automatically when installed via pip.

API

PipDrawer(
    id="drawer-id",           # Required — used in callbacks
    children=None,             # Content inside the ScrollArea
    title="Panel Title",       # Drawer header
    opened=False,              # Controlled via callback
    position="bottom",         # "bottom", "top", "left", "right"
    size="92%",                # Max height/width
    scroll_type="auto",        # ScrollArea type
    className="",              # Additional CSS classes
    padding="md",              # Content padding (Mantine spacing)
    glass_opacity=0.85,        # Glass background opacity (0.0–1.0)
    **drawer_props             # Passthrough to dmc.Drawer
)

glass_opacity

Controls the translucency of the drawer's frosted glass background.

Works in both light and dark mode automatically.

CSS

The package includes pip_drawer.css with:

1. Single-scroll-overlay — structural CSS for the Drawer
2. Glass morphism scrollbar — styled track + thumb with backdrop-filter
3. Dark mode — adapted colors via [data-mantine-color-scheme="dark"]
4. Responsive sizing — mobile, desktop, large screen, touch device breakpoints
5. Reduced motion — respects prefers-reduced-motion

Links

• pip-install-python
• Plotly Pro
• GitHub
• PyPI

License

MIT License - Copyright (c) 2025 Pip Install Python LLC

See LICENSE for details.