Fluxo UIFluxo UIv0.4.1

Docked Layout

A VS Code-style panel layout engine. Dock panels to left, right, or bottom edges. Toggle between pinned and auto-hide. Drag headers to re-dock. Float panels freely with full layout state persistence.

Basic Usage

Left, right, and bottom panels. The "Filters" panel starts as auto-hide — click its icon to reveal it. Drag panel headers to re-dock. Click the pin button to toggle between pinned and auto-hide.

Basic Usage

Left, right, and bottom panels with tabbed groups. 'Filters' starts as auto-hide. Drag panel headers to re-dock. Click the pin button to toggle pinned/auto-hide.

Main Content

Resize by dragging the edge between panel and center. Drag a panel header to re-dock it. Press the pin icon to toggle auto-hide.

import { DockedLayout } from 'fluxo-ui';
import type { PanelConfig } from 'fluxo-ui';

const panels: PanelConfig[] = [
  {
    id: 'explorer',
    title: 'Explorer',
    icon: FolderIcon,
    defaultPosition: 'left',
    defaultState: 'pinned',
    defaultSize: 220,
    children: <ExplorerPanel />,
  },
  {
    id: 'properties',
    title: 'Properties',
    icon: SettingsIcon,
    defaultPosition: 'right',
    defaultState: 'pinned',
    defaultSize: 240,
    children: <PropertiesPanel />,
  },
  {
    id: 'output',
    title: 'Output',
    icon: BarChartIcon,
    defaultPosition: 'bottom',
    defaultState: 'pinned',
    defaultSize: 150,
    children: <OutputPanel />,
  },
];

<DockedLayout panels={panels}>
  <main style={{ padding: 24 }}>Main content here</main>
</DockedLayout>

Tab Modes

Switch between 'icon' (compact icon-only tabs) and 'icon-label' (icon with label text) via the tabMode prop.

Tab Modes

Switch between 'icon' (compact icon-only) and 'icon-label' (icon with label text below) activity bar modes.

tabMode: "icon"

Activity bar shows icons only.

<DockedLayout panels={panels} tabMode="icon">
  <Content />
</DockedLayout>

Floating Panels

Panels with defaultPosition='float' are freely positioned. Drag the header to move them. Resize from the bottom-right corner. Use dock buttons to attach to a side.

Floating Panels

Panels with defaultPosition='float' are freely draggable and resizable. Drag the header to move. Resize from the bottom-right corner. Use the dock buttons to attach to a side.

The "Color Picker" panel is floating. Drag its header to reposition it. Use the dock buttons in its header to attach it to a side.

const panels: PanelConfig[] = [
  {
    id: 'floating-panel',
    title: 'Color Picker',
    icon: PaletteIcon,
    defaultPosition: 'float',
    defaultFloatPos: { x: 240, y: 60, width: 280, height: 200 },
    children: <ColorPickerContent />,
  },
];

<DockedLayout panels={panels}>
  <Content />
</DockedLayout>

Layout Persistence

The onChange callback fires on every layout change. Pass the state back via layoutState to restore a saved layout.

Layout Persistence

The onChange callback fires on every layout change — resize, pin toggle, re-dock. Pass the state back via layoutState to restore it.

Resize or re-dock panels. Layout changes are captured via onChange.

Layout onChange fired: 0 times
const [layoutState, setLayoutState] = useState<DockedLayoutState>();

<DockedLayout
  panels={panels}
  layoutState={layoutState}
  onChange={(state) => {
    setLayoutState(state);
    localStorage.setItem('layout', JSON.stringify(state));
  }}
>
  <Content />
</DockedLayout>

Import

import { DockedLayout } from 'fluxo-ui';
import type { DockedLayoutState, PanelConfig, TabMode } from 'fluxo-ui';

DockedLayout Props

panelsreq
PanelConfig[]

Array of panel configuration objects.

children
React.ReactNode

The main center content area.

layoutState
DockedLayoutState

Controlled layout state. Use onChange to keep in sync.

onChange
(state: DockedLayoutState) => void

Fired on every layout change for persistence.

tabMode
'icon' | 'icon-label'"'icon'"

Activity bar display mode.

className
string

Additional CSS class names.

style
React.CSSProperties

Inline styles for the outer container.

PanelConfig Props

idreq
string

Unique panel identifier.

titlereq
string

Panel display title and activity bar tooltip.

iconreq
SVGIcon

Icon rendered in the activity bar. Must be from icons.ts.

children
React.ReactNode

Panel body content.

defaultPosition
'left' | 'right' | 'bottom' | 'float'"'left'"

Initial dock position.

defaultState
'pinned' | 'auto-hide'"'pinned'"

Initial pin state.

defaultSize
number"260"

Initial size in pixels.

minSize
number"100"

Minimum size in pixels during resize.

defaultVisible
boolean"true"

Whether visible in activity bar on initial render.

defaultFloatPos
FloatPos

Initial position/size for floating: { x, y, width, height }.

userCanMove
boolean"true"

Whether end user can re-dock the panel.

userCanResize
boolean"true"

Whether end user can resize the panel.

userCanClose
boolean"true"

Whether end user can close the panel.

userCanTogglePin
boolean"true"

Whether end user can toggle pin/auto-hide.

Features

Multi-position Docking

Dock panels to left, right, bottom, or let them float freely. Each panel is independently positioned.

Pin / Auto-Hide

Toggle between pinned (always visible, takes layout space) and auto-hide (expands on demand as an overlay).

Drag to Re-dock

Drag any panel header to re-dock it to a different edge or float it. Drop zones highlight during drag.

Tabbed Dock Regions

Multiple panels in the same dock position form a tabbed group. Click activity bar icons to switch.

Resizable Panels

Drag the splitter between any pinned panel and center content. Min/max size constraints are respected.

Floating Panels

Detach any panel to float freely. Floating panels are draggable by header and resizable from the corner.

Layout State Persistence

onChange fires on every layout change. Restore any saved state by passing it back via layoutState.

Tab Modes

Choose between 'icon' (compact) and 'icon-label' modes for the activity bar.