Resizable

ResizablePanelGroup builds split layouts whose panels the user can drag to resize. It is composed from ResizablePanelGroup (the container that sets direction), ResizablePanel (each pane, with a defaultSize), and ResizableHandle (the draggable divider between panels). Nest groups to create grid-like, fully adjustable layouts.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: resizable.tsx

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@beacon/design-system";

<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">One</div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">Two</div>
  </ResizablePanel>
</ResizablePanelGroup>;

Parts

Part	Role
ResizablePanelGroup	Container for a set of panels. Set direction="horizontal" or direction="vertical".
ResizablePanel	One pane; defaultSize is its starting share (a percentage).
ResizableHandle	The draggable divider between two panels. Pass withHandle to show a visible grip.

ResizablePanelGroup and ResizablePanel forward the props of the underlying react-resizable-panels Group and Panel; ResizableHandle forwards Separator props plus withHandle.

When to use

• Master/detail layouts where the user wants to widen the list or the detail pane.
• Side-by-side editors, previews, or comparison views with adjustable proportions.
• Dense workspace screens where panel sizing is a user preference.

Do not use Resizable for simple fixed two-column content; a plain flex or grid layout is lighter when the user does not need to drag the divide.