Dock View

dash-dock-view is a professional-grade docking layout system for Dash applications. Build complex, resizable, and rearrangeable panel layouts with ease. It features 4 layout components (DashDockLayout, DashGridLayout, DashSplitLayout, DashPaneLayout), drag & drop tab management, panel positioning (left, right, top, bottom, center), floating panels, layout persistence, and Apple Liquid Glass themes.

Installation

Visit GitHub Repo

pip install dash-dock-view

Requirements:

• Python >= 3.7
• Dash >= 2.0

Quick Start

Create a simple docking layout with three panels.

# File: docs/dash_dock_view/docklayout_example.py

"""DashDockLayout example for Dock View documentation."""
from dash import html
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash_dock_view import DashDockLayout

# Panel contents
panel_contents = [
    html.Div(
        id="editor-panel",
        children=[
            dmc.Stack([
                dmc.Group([
                    DashIconify(icon="mdi:file-code", width=20),
                    dmc.Text("app.py", fw=500),
                ]),
                dmc.CodeHighlight(
                    language="python",
                    code='from dash import Dash\n\napp = Dash(__name__)\n\nif __name__ == "__main__":\n    app.run(debug=True)',
                ),
            ], p="md")
        ],
        style={"height": "100%"}
    ),
    html.Div(
        id="console-panel",
        children=[
            html.Pre(
                "$ python app.py\n * Running on http://127.0.0.1:8050\n * Debug mode: on\n$ ",
                style={
                    "backgroundColor": "#1e1e1e",
                    "color": "#00ff00",
                    "padding": "10px",
                    "margin": "0",
                    "fontFamily": "monospace",
                    "height": "100%",
                }
            )
        ],
        style={"height": "100%"}
    ),
    html.Div(
        id="explorer-panel",
        children=[
            dmc.Stack([
                dmc.Text("EXPLORER", size="xs", fw=700, c="dimmed"),
                dmc.NavLink(label="src", leftSection=DashIconify(icon="mdi:folder", color="yellow")),
                dmc.NavLink(label="app.py", leftSection=DashIconify(icon="mdi:file-code", color="blue")),
                dmc.NavLink(label="README.md", leftSection=DashIconify(icon="mdi:file-document")),
            ], p="sm", gap="xs")
        ],
        style={"height": "100%"}
    ),
]

component = dmc.Paper(
    DashDockLayout(
        id="dock-demo",
        panels=[
            {"id": "editor-panel", "title": "Editor", "position": "center"},
            {"id": "console-panel", "title": "Console", "position": "bottom", "size": 150},
            {"id": "explorer-panel", "title": "Explorer", "position": "left", "size": 200},
        ],
        children=panel_contents,
        theme="dockview-theme-dark",
        height="400px",
        showAddButton=False,
    ),
    withBorder=True,
    radius="md",
    p=4,
)

Layout Components

Dash Dock View provides four distinct layout components for different use cases:

1. DashDockLayout

Full-featured docking system with tabs, floating panels, and drag-and-drop. Ideal for IDE-style interfaces.

from dash_dock_view import DashDockLayout

DashDockLayout(
    id="my-dock",
    panels=[
        {"id": "panel-1", "title": "Editor", "position": "center"},
        {"id": "panel-2", "title": "Console", "position": "bottom", "size": 200},
        {"id": "panel-3", "title": "Explorer", "position": "left", "size": 250},
    ],
    children=[
        html.Div(id="panel-1", children="Main content"),
        html.Div(id="panel-2", children="Console output"),
        html.Div(id="panel-3", children="File explorer"),
    ],
    theme="dockview-theme-dark",
    height="600px",
)

2. DashGridLayout

Grid-based resizable panel system for structured layouts.

# File: docs/dash_dock_view/gridlayout_example.py

"""DashGridLayout example for Dock View documentation."""
from dash import html
import dash_mantine_components as dmc
from dash_dock_view import DashGridLayout

# Sample data for chart
chart_data = [
    {"month": "Jan", "value": 1200},
    {"month": "Feb", "value": 1900},
    {"month": "Mar", "value": 1600},
    {"month": "Apr", "value": 2100},
    {"month": "May", "value": 1800},
]

# Panel contents
panel_contents = [
    html.Div(
        id="grid-chart-panel",
        children=[
            dmc.BarChart(
                h="100%",
                data=chart_data,
                dataKey="month",
                series=[{"name": "value", "color": "blue.6"}],
                withLegend=True,
            )
        ],
        style={"height": "100%", "padding": "1rem"}
    ),
    html.Div(
        id="grid-info-panel",
        children=[
            dmc.Stack([
                dmc.Title("Grid Layout", order=4),
                dmc.Text("Resize panels by dragging the divider.", c="dimmed", size="sm"),
                dmc.Divider(my="md"),
                dmc.Text("Features:", fw=600, size="sm"),
                dmc.List([
                    dmc.ListItem("Horizontal or vertical orientation"),
                    dmc.ListItem("Proportional resizing"),
                    dmc.ListItem("Customizable panel sizes"),
                ], size="sm"),
            ], p="md")
        ],
        style={"height": "100%"}
    ),
]

component = dmc.Paper(
    DashGridLayout(
        id="grid-demo",
        panels=[
            {"id": "grid-chart-panel", "size": 300},
            {"id": "grid-info-panel", "size": 200},
        ],
        children=panel_contents,
        theme="dockview-theme-dark",
        height="300px",
        orientation="horizontal",
        proportionalLayout=True,
    ),
    withBorder=True,
    radius="md",
    p=4,
)

3. DashSplitLayout

Simple split panel layout with horizontal or vertical orientation.

from dash_dock_view import DashSplitLayout

DashSplitLayout(
    id="my-split",
    panels=[
        {"id": "left-panel", "size": 300},
        {"id": "right-panel"},
    ],
    children=[
        html.Div(id="left-panel", children="Left content"),
        html.Div(id="right-panel", children="Right content"),
    ],
    orientation="horizontal",  # or "vertical"
    height="400px",
)

4. DashPaneLayout

Collapsible accordion-style panes for organized content.

from dash_dock_view import DashPaneLayout

DashPaneLayout(
    id="my-panes",
    panels=[
        {"id": "pane-1", "title": "Section 1", "collapsed": False},
        {"id": "pane-2", "title": "Section 2", "collapsed": True},
    ],
    children=[
        html.Div(id="pane-1", children="Content 1"),
        html.Div(id="pane-2", children="Content 2"),
    ],
    height="400px",
)

Panel Configuration

Each panel in the layout can be configured with the following options:

Position Examples:

panels = [
    {"id": "editor", "title": "Editor", "position": "center"},      # Main area
    {"id": "explorer", "title": "Explorer", "position": "left", "size": 250},  # Left sidebar
    {"id": "console", "title": "Console", "position": "bottom", "size": 150},  # Bottom panel
    {"id": "props", "title": "Properties", "position": "right", "size": 200},  # Right sidebar
]

Theming

Dash Dock View supports four built-in themes including Apple's Liquid Glass design.

# File: docs/dash_dock_view/themes_example.py

"""
Liquid Glass Themes Example for Dash Dock View
================================================
Showcases Apple WWDC 2025 inspired liquid glass design with light/dark themes.
"""
from dash import callback, Input, Output
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash_dock_view import DashDockLayout

# Inline style definitions for glass effects
GLASS_PANEL_STYLE_DARK = {
    "backdropFilter": "blur(20px) saturate(180%)",
    "WebkitBackdropFilter": "blur(20px) saturate(180%)",
    "background": "linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%)",
    "border": "1px solid rgba(255, 255, 255, 0.15)",
    "boxShadow": "0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
    "borderRadius": "12px",
    "transition": "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
}

GLASS_PANEL_STYLE_LIGHT = {
    "backdropFilter": "blur(20px) saturate(180%)",
    "WebkitBackdropFilter": "blur(20px) saturate(180%)",
    "background": "linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%)",
    "border": "1px solid rgba(255, 255, 255, 0.5)",
    "boxShadow": "0 8px 32px rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
    "borderRadius": "12px",
    "transition": "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
}

FEATURE_CARD_STYLE_DARK = {
    "backdropFilter": "blur(16px) saturate(160%)",
    "WebkitBackdropFilter": "blur(16px) saturate(160%)",
    "background": "rgba(45, 55, 72, 0.6)",
    "border": "1px solid rgba(255, 255, 255, 0.1)",
    "borderRadius": "10px",
    "padding": "1rem",
    "transition": "all 0.3s ease",
}

FEATURE_CARD_STYLE_LIGHT = {
    "backdropFilter": "blur(16px) saturate(160%)",
    "WebkitBackdropFilter": "blur(16px) saturate(160%)",
    "background": "rgba(255, 255, 255, 0.7)",
    "border": "1px solid rgba(0, 0, 0, 0.05)",
    "borderRadius": "10px",
    "padding": "1rem",
    "transition": "all 0.3s ease",
}

STAT_BADGE_STYLE_DARK = {
    "backdropFilter": "blur(8px)",
    "WebkitBackdropFilter": "blur(8px)",
    "background": "rgba(79, 195, 247, 0.2)",
    "border": "1px solid rgba(79, 195, 247, 0.3)",
    "borderRadius": "20px",
    "padding": "0.5rem 1rem",
}

STAT_BADGE_STYLE_LIGHT = {
    "backdropFilter": "blur(8px)",
    "WebkitBackdropFilter": "blur(8px)",
    "background": "rgba(79, 195, 247, 0.15)",
    "border": "1px solid rgba(79, 195, 247, 0.25)",
    "borderRadius": "20px",
    "padding": "0.5rem 1rem",
}


def create_overview_panel(theme="dark"):
    """Create overview panel with theme switcher."""
    glass_style = GLASS_PANEL_STYLE_DARK if theme == "dark" else GLASS_PANEL_STYLE_LIGHT
    stat_badge_style = STAT_BADGE_STYLE_DARK if theme == "dark" else STAT_BADGE_STYLE_LIGHT

    return dmc.Box(
        id="lg-overview-panel",
        p="lg",
        style={**glass_style, "height": "100%", "overflow": "auto"},
        children=[
            dmc.Stack(
                gap="md",
                children=[
                    dmc.Group(
                        justify="space-between",
                        children=[
                            dmc.Group(
                                gap="sm",
                                children=[
                                    DashIconify(icon="mdi:palette-advanced", width=32, color="#4FC3F7"),
                                    dmc.Stack(
                                        gap=0,
                                        children=[
                                            dmc.Title("Liquid Glass", order=3),
                                            dmc.Text("Apple WWDC 2025", size="xs", c="dimmed"),
                                        ]
                                    ),
                                ]
                            ),
                            dmc.SegmentedControl(
                                id="lg-theme-switcher",
                                data=[
                                    {"value": "dark", "label": "🌙 Dark"},
                                    {"value": "light", "label": "☀️ Light"},
                                ],
                                value=theme,
                                color="blue",
                                radius="lg",
                            ),
                        ]
                    ),
                    dmc.Divider(opacity=0.2),
                    dmc.Text(
                        "Experience the next generation of UI design with glassmorphism effects, backdrop blur, and translucent layers.",
                        size="sm",
                        c="dimmed",
                    ),
                    dmc.Group(
                        gap="xs",
                        children=[
                            dmc.Box(dmc.Badge("Backdrop Blur", variant="dot", color="cyan"), style=stat_badge_style),
                            dmc.Box(dmc.Badge("Translucency", variant="dot", color="violet"), style=stat_badge_style),
                            dmc.Box(dmc.Badge("Gradients", variant="dot", color="orange"), style=stat_badge_style),
                        ]
                    ),
                ]
            )
        ]
    )


def create_features_panel(theme="dark"):
    """Create features showcase panel."""
    feature_style = FEATURE_CARD_STYLE_DARK if theme == "dark" else FEATURE_CARD_STYLE_LIGHT

    return dmc.Box(
        id="lg-features-panel",
        p="md",
        style={"height": "100%", "overflow": "auto"},
        children=[
            dmc.Stack(
                gap="sm",
                children=[
                    dmc.Title("Key Features", order=5, mb="xs"),
                    dmc.Box(
                        style=feature_style,
                        children=[
                            dmc.Group(
                                gap="sm",
                                mb="xs",
                                children=[
                                    DashIconify(icon="mdi:blur", width=20, color="#4FC3F7"),
                                    dmc.Text("Backdrop Blur", fw=600, size="sm"),
                                ]
                            ),
                            dmc.Text(
                                "Advanced blur effects with 20px radius and 180% saturation for ultra-realistic glass.",
                                size="xs",
                                c="dimmed",
                            ),
                        ]
                    ),
                    dmc.Box(
                        style=feature_style,
                        children=[
                            dmc.Group(
                                gap="sm",
                                mb="xs",
                                children=[
                                    DashIconify(icon="mdi:opacity", width=20, color="#9C27B0"),
                                    dmc.Text("Transparency", fw=600, size="sm"),
                                ]
                            ),
                            dmc.Text(
                                "Layered semi-transparent gradients that adapt to light and dark modes.",
                                size="xs",
                                c="dimmed",
                            ),
                        ]
                    ),
                    dmc.Box(
                        style=feature_style,
                        children=[
                            dmc.Group(
                                gap="sm",
                                mb="xs",
                                children=[
                                    DashIconify(icon="mdi:gradient-vertical", width=20, color="#FFC107"),
                                    dmc.Text("Liquid Borders", fw=600, size="sm"),
                                ]
                            ),
                            dmc.Text(
                                "Animated gradient borders with smooth 8s infinite animation cycles.",
                                size="xs",
                                c="dimmed",
                            ),
                        ]
                    ),
                ]
            )
        ]
    )


def create_controls_panel(theme="dark"):
    """Create interactive controls panel."""
    glass_style = GLASS_PANEL_STYLE_DARK if theme == "dark" else GLASS_PANEL_STYLE_LIGHT

    return dmc.Box(
        id="lg-controls-panel",
        p="md",
        style={**glass_style, "height": "100%", "overflow": "auto"},
        children=[
            dmc.Stack(
                gap="md",
                children=[
                    dmc.Title("Controls", order=5),
                    dmc.Text("Interact with glass-style components:", size="xs", c="dimmed", mb="xs"),
                    dmc.Group(
                        gap="xs",
                        children=[
                            dmc.Button(
                                "Primary",
                                size="sm",
                                variant="light",
                                color="blue",
                                leftSection=DashIconify(icon="mdi:cursor-default-click", width=16),
                            ),
                            dmc.Button(
                                "Success",
                                size="sm",
                                variant="light",
                                color="green",
                                leftSection=DashIconify(icon="mdi:check-circle", width=16),
                            ),
                        ]
                    ),
                    dmc.Divider(opacity=0.2),
                    dmc.Slider(
                        id="lg-demo-slider",
                        value=65,
                        min=0,
                        max=100,
                        marks=[
                            {"value": 0, "label": "0%"},
                            {"value": 50, "label": "50%"},
                            {"value": 100, "label": "100%"},
                        ],
                        mb="xl",
                        color="cyan",
                    ),
                    dmc.Switch(
                        id="lg-demo-switch",
                        label="Enable animations",
                        checked=True,
                        size="md",
                        color="violet",
                    ),
                ]
            )
        ]
    )


def create_metrics_panel(theme="dark"):
    """Create metrics panel with glass effect."""
    feature_style = FEATURE_CARD_STYLE_DARK if theme == "dark" else FEATURE_CARD_STYLE_LIGHT

    return dmc.Box(
        id="lg-metrics-panel",
        p="md",
        style={"height": "100%", "overflow": "auto"},
        children=[
            dmc.Stack(
                gap="lg",
                children=[
                    dmc.Title("Metrics", order=5),
                    dmc.Stack(
                        gap="md",
                        children=[
                            dmc.Box(
                                style=feature_style,
                                children=[
                                    dmc.Group(
                                        justify="space-between",
                                        children=[
                                            dmc.Stack(
                                                gap=0,
                                                children=[
                                                    dmc.Text("Blur Radius", size="xs", c="dimmed"),
                                                    dmc.Title("20px", order=4, c="cyan"),
                                                ]
                                            ),
                                            DashIconify(icon="mdi:blur-radial", width=32, color="#4FC3F7", style={"opacity": 0.6}),
                                        ]
                                    ),
                                ]
                            ),
                            dmc.Box(
                                style=feature_style,
                                children=[
                                    dmc.Group(
                                        justify="space-between",
                                        children=[
                                            dmc.Stack(
                                                gap=0,
                                                children=[
                                                    dmc.Text("Saturation", size="xs", c="dimmed"),
                                                    dmc.Title("180%", order=4, c="violet"),
                                                ]
                                            ),
                                            DashIconify(icon="mdi:palette", width=32, color="#9C27B0", style={"opacity": 0.6}),
                                        ]
                                    ),
                                ]
                            ),
                            dmc.Box(
                                style=feature_style,
                                children=[
                                    dmc.Group(
                                        justify="space-between",
                                        children=[
                                            dmc.Stack(
                                                gap=0,
                                                children=[
                                                    dmc.Text("Opacity", size="xs", c="dimmed"),
                                                    dmc.Title("65%", order=4, c="orange"),
                                                ]
                                            ),
                                            DashIconify(icon="mdi:opacity", width=32, color="#FFC107", style={"opacity": 0.6}),
                                        ]
                                    ),
                                ]
                            ),
                        ]
                    ),
                ]
            )
        ]
    )


def create_code_panel(theme="dark"):
    """Create code preview panel."""
    glass_style = GLASS_PANEL_STYLE_DARK if theme == "dark" else GLASS_PANEL_STYLE_LIGHT

    return dmc.Box(
        id="lg-code-panel",
        p="md",
        style={**glass_style, "height": "100%", "overflow": "auto"},
        children=[
            dmc.Stack(
                gap="sm",
                children=[
                    dmc.Group(
                        justify="space-between",
                        children=[
                            dmc.Title("CSS Preview", order=5),
                            dmc.ActionIcon(
                                DashIconify(icon="mdi:content-copy", width=16),
                                variant="subtle",
                                color="gray",
                                size="sm",
                            ),
                        ]
                    ),
                    dmc.Code(
                        block=True,
                        children="""backdrop-filter: blur(20px) saturate(180%);
background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.08) 0%,
  rgba(255, 255, 255, 0.05) 100%
);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
  0 8px 32px rgba(0, 0, 0, 0.5),
  inset 0 1px 0 rgba(255, 255, 255, 0.1);""",
                        style={"fontSize": "11px"},
                    ),
                ]
            )
        ]
    )


# Main component
component = dmc.Box(
    id="liquid-glass-demo-container",
    style={
        "background": "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
        "borderRadius": "16px",
        "padding": "4px",
        "position": "relative",
        "transition": "background 0.3s ease",
    },
    children=[
        DashDockLayout(
            id="lg-dock-layout",
            panels=[
                {"id": "lg-overview-panel", "title": "Overview", "closeable": False},
                {"id": "lg-features-panel", "title": "Features", "closeable": False},
                {"id": "lg-controls-panel", "title": "Controls", "closeable": False},
                {"id": "lg-metrics-panel", "title": "Metrics", "closeable": False},
                {"id": "lg-code-panel", "title": "Code", "closeable": False},
            ],
            children=[
                create_overview_panel("dark"),
                create_features_panel("dark"),
                create_controls_panel("dark"),
                create_metrics_panel("dark"),
                create_code_panel("dark"),
            ],
            theme="dockview-theme-liquid-glass-dark",
            height="450px",
            showAddButton=False,
        ),
    ]
)


# Callback to switch themes
@callback(
    Output("liquid-glass-demo-container", "style"),
    Output("lg-dock-layout", "theme"),
    Output("lg-dock-layout", "children"),
    Input("lg-theme-switcher", "value"),
)
def switch_liquid_glass_theme(theme_value):
    """Toggle between liquid glass light and dark themes."""
    if theme_value == "light":
        container_style = {
            "background": "linear-gradient(135deg, #e8f4f8 0%, #d4e5f7 50%, #c1d5eb 100%)",
            "borderRadius": "16px",
            "padding": "4px",
            "position": "relative",
            "transition": "background 0.3s ease",
        }
        return (
            container_style,
            "dockview-theme-liquid-glass-light",
            [
                create_overview_panel("light"),
                create_features_panel("light"),
                create_controls_panel("light"),
                create_metrics_panel("light"),
                create_code_panel("light"),
            ]
        )
    else:
        container_style = {
            "background": "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
            "borderRadius": "16px",
            "padding": "4px",
            "position": "relative",
            "transition": "background 0.3s ease",
        }
        return (
            container_style,
            "dockview-theme-liquid-glass-dark",
            [
                create_overview_panel("dark"),
                create_features_panel("dark"),
                create_controls_panel("dark"),
                create_metrics_panel("dark"),
                create_code_panel("dark"),
            ]
        )

Available Themes:

Applying Themes:

DashDockLayout(
    id="my-dock",
    panels=[...],
    children=[...],
    theme="dockview-theme-liquid-glass-dark",  # Apply theme
    height="500px",
)

Liquid Glass CSS Variables:

.dockview-theme-liquid-glass-dark {
    --dv-background-color: rgba(30, 30, 30, 0.65);
    --dv-foreground-color: rgba(255, 255, 255, 0.95);
    --dv-separator-border: rgba(255, 255, 255, 0.12);
}

.dockview-theme-liquid-glass-dark .dv-dockview {
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 12px;
}

Layout Persistence

Save and restore layout configurations using the layout property.

from dash import callback, Input, Output, State
import json

# Save layout
@callback(
    Output("layout-store", "data"),
    Input("dock-layout", "layout"),
)
def save_layout(layout):
    return json.dumps(layout) if layout else None

# Restore layout
@callback(
    Output("dock-layout", "layout"),
    Input("restore-btn", "n_clicks"),
    State("layout-store", "data"),
    prevent_initial_call=True,
)
def restore_layout(n_clicks, saved_layout):
    if saved_layout:
        return json.loads(saved_layout)
    return dash.no_update

Callbacks and Interactivity

Dash Dock View components integrate seamlessly with Dash callbacks.

Available Callback Properties:

• activePanel: Currently active panel id
• panelCount: Number of visible panels
• layout: Current layout configuration (JSON)

@callback(
    Output("active-display", "children"),
    Output("count-display", "children"),
    Input("dock-layout", "activePanel"),
    Input("dock-layout", "panelCount"),
)
def update_info(active_panel, panel_count):
    return f"Active: {active_panel}", f"Count: {panel_count}"

Component Properties

DashDockLayout

DashGridLayout

DashSplitLayout

DashPaneLayout

Dynamic Props vs Construction Props

Some props can be updated dynamically, while others require recreating the component:

Dynamic Props (Live Update):

• locked, gap, disableDnd, disableFloatingGroups, showAddButton, height

Construction Props (Require Reset):

• hideBorders, singleTabMode, panels

# Dynamic prop update - works instantly
@callback(
    Output("dock-layout", "locked"),
    Input("lock-switch", "checked"),
)
def toggle_lock(checked):
    return checked

# Construction prop - requires component recreation
@callback(
    Output("dock-container", "children"),
    Input("apply-btn", "n_clicks"),
    State("hide-borders-switch", "checked"),
)
def apply_construction_props(n_clicks, hide_borders):
    return DashDockLayout(
        id="dock-layout",
        panels=[...],
        children=[...],
        hideBorders=hide_borders,  # Requires fresh component
    )

Best Practices

1. Match Panel IDs: Ensure each panel's id matches the corresponding child component's id

panels = [{"id": "my-panel", "title": "My Panel"}]
children = [html.Div(id="my-panel", children="Content")]  # IDs must match!

1. Set Explicit Height: Always set a height for the container

DashDockLayout(
    ...,
    height="600px",  # or "80vh"
)

1. Use Theme-Aware Backgrounds: For Liquid Glass themes, use gradient backgrounds

html.Div(
    DashDockLayout(..., theme="dockview-theme-liquid-glass-dark"),
    style={
        "background": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
        "borderRadius": "16px",
        "padding": "4px",
    }
)

1. Prevent Initial Callbacks: Use prevent_initial_call=True for callbacks that respond to user interactions

Troubleshooting

Issue: Panel content not appearing

Solution: Ensure the panel id matches the child component's id exactly.

Issue: Layout not filling container

Solution: Set an explicit height prop (e.g., "600px" or "80vh").

Issue: Theme not applying correctly

Solution: Make sure you're using the correct theme class name and the component is wrapped appropriately for glass themes.

Issue: Drag and drop not working

Solution: Check that disableDnd is not set to True and locked is False.

Contributing

Contributions to dash-dock-view are welcome! Please refer to the project's issues on GitHub for any feature requests or bug reports.

License

This project is created under Pip Install Python LLC and licensed under the MIT License.