Resizable

Use ResizablePanelGroup, ResizablePanel, and ResizableHandle when you want people to adjust how much space each section gets. Wrap your app in ThemeProvider so split layouts respect right-to-left languages; handles pick up neutral dividers and clear hover and focus styles from the experience system.

Installation

The components are exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

Use the following composition to build a resizable layout:

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

The underlying primitive is react-resizable-panels (v4). ResizablePanelGroup wraps Group, ResizablePanel wraps Panel, and ResizableHandle wraps Separator. Because this is a non-Radix component, the API tables below mirror the upstream library exports, with the Experience System additions (divider, withHandle, defaulted dir from ThemeProvider) called out inline.

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@by/experience-system';

These pieces run on the client ('use client'). In the Next.js App Router, use them inside a client component or load them with a dynamic import. Put ThemeProvider above the tree so the group knows the page direction for resizing in RTL.

<div className="mx-auto w-[400px] shrink-0">
  <ResizablePanelGroup className="min-h-[200px] w-full rounded-sm border border-neutral-alpha-3">
    <ResizablePanel defaultSize="50%">
      <div className="flex h-full items-center justify-center p-6">Left</div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize="50%">
      <div className="flex h-full items-center justify-center p-6">Right</div>
    </ResizablePanel>
  </ResizablePanelGroup>
</div>

Examples

Vertical

Set orientation="vertical" to stack regions top and bottom—often a slim header over the main area.

With cards

Compose ResizablePanel with Card content for a master/detail layout where each side is its own surface.

Divider appearance

ResizableHandle controls how obvious the separator is. Use divider="invisible" for a minimal split—the track stays transparent until you hover or focus it (good for dense layouts).

Use withHandle when you want a clear grip bar on top of the default line so people can spot the drag target faster.

API Reference

Pieces map to react-resizable-panels (v4) primitives. The tables below mirror the upstream API in full, with Experience System extensions labeled inline. Standard HTMLDivElement attributes are also accepted on each component (className, style, id, data-*, etc.).

ResizablePanelGroup

ResizablePanelGroup wraps the upstream Group. Direction is inferred from ThemeProvider via dir; default orientation is "horizontal".

display, flex-direction, flex-wrap, and overflow cannot be overridden via style per the upstream library contract.

ResizablePanel

ResizablePanel wraps the upstream Panel. Sizes accept percentages ("50%" or 50), pixels ("240px"), or relative units ("1rem", "30vh", etc.).

ResizableHandle

ResizableHandle wraps the upstream Separator and adds divider plus withHandle for Experience System styling.

flex-grow and flex-shrink cannot be overridden via style per the upstream library contract.

Accessibility

People can move focus to a separator and use the keyboard to resize where the underlying behavior allows it; focus is shown with the accent ring. Put real labels or headings inside panels when the split carries meaning for screen readers, and prefer withHandle for touch surfaces so the drag target is easier to find.

Keyboard interactions

Source in the repo: packages/experience-system/src/components/Resizable/Resizable.tsx. Agent-oriented contracts: packages/experience-system/src/components/Resizable/Resizable.instructions.md.