Basic Layout

A three-panel horizontal layout using string-based percentage defaults and constraints.

Sidebar

30%

Main Content

50%

Details

20%

Nested IDE Layout (Persistent)

A nested workspace with editor and terminal. Layout state is persisted automatically across refreshes.

Explorer

editor.tsx

Source code editing panel

terminal

$ bun dev --hot

Imperative Control & Collapsible Panel

Toggle the collapsible panel programmatically using its imperative ref handle or drag to snap.

Sidebar Panel Content

Main Application Space

Sidebar status: EXPANDED

Advanced Pixel Constraints & Callbacks

Left panel is fixed-pixel (`minSize="150px"`, `maxSize="350px"`), collapsible, and preserves its pixel width on window resize. Middle panel is disabled. Size updates trigger callbacks displayed below.

Preserved Pixel Panel

0% (0px)

Disabled Panel

Locked at 40% (cannot resize)

Fluid Right

Adjusts freely