Resizable

Usage

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from '@acronis-platform/ui-react';

Resizable wraps react-resizable-panels. ResizablePanelGroup lays out ResizablePanel children along an orientation (horizontal or vertical), separated by a ResizableHandle the user drags. The handle is themed by the --ui-resizable-* tokens.

Examples

A horizontal split — panels side by side, vertical divider (sidebar + content):

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={40} minSize={20}>
    Sidebar
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={60}>Content</ResizablePanel>
</ResizablePanelGroup>

A vertical split — panels stacked, horizontal divider (editor + preview):

<ResizablePanelGroup orientation="vertical">
  <ResizablePanel defaultSize={60}>Editor</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={40}>Preview</ResizablePanel>
</ResizablePanelGroup>

The group fills its container (h-full w-full), so give it — or an ancestor — a bounded height for a horizontal split, and a bounded width for a vertical one.

Handle states

The handle is a 9px hit area around a 1px divider line (4px to each side of it). It costs no layout space: the hit area overlays the boundary between the two panels rather than sitting between them, so adjacent panels (and their own borders) stay flush against each other. The line reads --ui-border-on-surface-border at rest, --ui-resizable-border-color-hover on pointer hover, and --ui-resizable-border-color-active while dragging; the cursor is --ui-resizable-cursor (ew-resize), or ns-resize when the panels are stacked.

On keyboard focus the line itself paints a 3px --ui-focus-primary ring and takes the active color, so the ring stays centered on the divider instead of outlining the whole hit area. The ring is dropped again during a drag — a pointer resize shows only the active line.

The divider is drawn with a logical border (inline-start for a vertical divider, block-start for a stacked one) rather than a filled strip, so it pixel-snaps at fractional handle positions and renders correctly under dir="rtl".

Keyboard

API Reference

ResizableHandle

ResizablePanelGroup and ResizablePanel pass through the Group and Panel props of react-resizable-panels (e.g. orientation, defaultSize, minSize, maxSize, onResize). See the react-resizable-panels API for the full list.