ResizablePanel

ResizablePanelGroup composes one or more ResizablePanels separated by ResizableHandles. Drag a handle to redistribute size between adjacent panels — useful for sidebars, split editors, and multi-pane product surfaces.

#Default usage

<div style={{ height: 180, width: "100%" }}>
  <ResizablePanelGroup>
    <ResizablePanel defaultSize={32} minSize={20}>
      <div style={{ padding: 12 }}>Sidebar</div>
    </ResizablePanel>
    <ResizableHandle index={0} />
    <ResizablePanel defaultSize={68}>
      <div style={{ padding: 12 }}>Main</div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

#Import

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@froggdesign/enter-ui-react";

#Accessibility

Each handle renders role="separator" with aria-orientation matching the group direction. Handles are focusable so keyboard users can tab into them; implement custom arrow-key behaviour on top of the component if your product needs it.

#API

• ResizablePanelGroup: direction (horizontal default, vertical).
• ResizablePanel: defaultSize (percent), minSize, maxSize.
• ResizableHandle: index (handle position; required when more than one handle).

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.