๐Ÿš€ Introducing 3 New Powerful Layout Components for Dash: Flow Diagrams, Dock Layouts & Flexible Layouts

Hey Plotly Community! :waving_hand:

Iโ€™m excited to share three new component libraries that bring advanced layout capabilities to your Dash applications. These components are now fully documented with live examples on pip-install-python.com.

Iโ€™ve also decided to archive dash-dock and remove the api-key lock required for premium features, all of the components, docks and tools available on pip docs will be open-source with no limitations.


:bar_chart: Dash Flows - Interactive Flow Diagrams for Dash

Build interactive node-based flow diagrams with ease!
1765829482567 (1)

Dash Flows is a thin wrapper around React Flow, bringing powerful flow diagram capabilities to Dash. Perfect for creating workflow visualizations, flowcharts, network diagrams, and node editors.

:sparkles: Key Features

  • Interactive Nodes & Edges: Drag, connect, and interact with nodes
  • Multiple Node Types: Default, input, output, and custom nodes
  • Smart Layouts: Automatic layouts with ELK (hierarchical, force-directed, radial)
  • Edge Customization: Straight, step, smoothstep, and bezier edges with labels
  • Callbacks Support: Full Dash callback integration for click, drag, and connection events
  • Minimap & Controls: Built-in navigation tools for complex diagrams

:package: Installation

pip install dash-flows

:link: Documentation & Examples

View Full Documentation โ†’

Explore comprehensive examples:


:window: Dash Dock View - Premium Dock Layout System

Create professional IDE-like layouts with floating windows and tabbed panels!

Dash Dock View brings the power of RC-Dock to Dash, offering a premium layout system with drag-and-drop panels, tabbed interfaces, and floating windows. Perfect for dashboards, data exploration tools, and complex applications.

:sparkles: Key Features

  • Drag & Drop Panels: Rearrange your layout interactively
  • Floating Windows: Pop out panels into separate windows
  • Tabbed Interface: Organize content with multi-tab support
  • Nested Layouts: Create complex hierarchies of rows, columns, and tabs
  • State Management: Save and restore layout configurations
  • Theme Support: Built-in light/dark themes + custom themes
  • Liquid Glass Design: Apple WWDC 2025 inspired glassmorphism theme

:package: Installation

pip install dash-dock-view

:link: Documentation & Examples

View Full Documentation โ†’

Explore comprehensive examples:

:gem_stone: Premium Features

Dash Dock View includes premium features like:

  • Pop-out windows - Float panels as separate windows
  • Maximum button - Maximize panels to full screen
  • Advanced themes - Professional theme system
  • State persistence - Save/restore layouts

:bullseye: Dash Flex Layout - Flexible Layout Manager

  • previously this component was dash-dock which has been archived and replaced with a name flexlayout-dash closer aligned with its original inspiration flexlayout-react

Build resizable, responsive layouts with ease!

Dash Flex Layout (flexlayout-dash) is a wrapper around FlexLayout-React, providing a flexible and powerful layout system with resizable panels, tabs, and drag-and-drop support.

:sparkles: Key Features

  • Resizable Panels: Drag dividers to resize sections
  • Tabbed Interface: Multiple tabs within panels
  • Drag & Drop: Rearrange tabs between panels
  • Nested Layouts: Create complex row/column hierarchies
  • State Management: Track and save layout changes
  • Responsive Design: Adapts to different screen sizes
  • Theme Integration: Works seamlessly with Dash Mantine Components

:package: Installation

pip install flexlayout-dash

:link: Documentation & Examples

View Full Documentation โ†’

Explore comprehensive examples:


:artist_palette: New in v1.1.0: Liquid Glass Themes

All layout components now feature Apple WWDC 2025 inspired liquid glass themes! Experience beautiful glassmorphism with:

  • Backdrop blur effects (20px blur, 180% saturation)
  • Translucent gradients that adapt to light/dark modes
  • Smooth transitions and professional depth
  • Completely isolated theme implementations

Check out the live theme showcases:


:rocket: Getting Started

All three components are:

:white_check_mark: Production-ready - Stable and well-tested
:white_check_mark: Fully documented - Comprehensive guides and examples
:white_check_mark: Theme-aware - Support for light/dark modes
:white_check_mark: Callback-enabled - Full Dash integration
:white_check_mark: Open source - Available on PyPI and GitHub


:link: Useful Links


:speech_balloon: Feedback & Questions

Iโ€™d love to hear your thoughts! Have you tried any of these components? What layouts are you building with Dash?

Feel free to:

  • :star: Star the repos on GitHub
  • :bug: Report issues or suggest features
  • :light_bulb: Share your use cases
  • :red_question_mark: Ask questions in this thread

Happy building! :rocket:


*Made with :heart: by Pip Install Python LLC

5 Likes

Thank you for making these open source, and your other contributions.

1 Like

That looks amazing !

The interactive flow diagrams are impressive. Really nice, @PipInstallPython .
Thanks for sharing :folded_hands: