ResizablePanels

A horizontal split view whose panes people resize by dragging the dividers between them, like a mail client or code editor.

When to use

• Side-by-side tools where people trade space for the task at hand: folders, list, and reader; editor and preview.
• Layouts where a side pane can be collapsed out of the way and restored.
• Not for stacked disclosure: use Accordion. Not for overlays: use Drawer.

Usage

import { ResizablePanels } from "@/components/iris/resizable-panels/resizable-panels";

h(
  "div",
  { style: { height: 420 } },
  h(
    ResizablePanels,
    { label: "Inbox layout", onLayoutChange: (sizes) => save(sizes) },
    h(ResizablePanel, { id: "folders", label: "Folders", defaultSize: 20, minSize: 140, collapsible: true }, folders),
    h(ResizablePanel, { id: "threads", label: "Threads", defaultSize: 32, minSize: 220 }, threads),
    h(ResizablePanel, { id: "reader", label: "Message", defaultSize: 48, minSize: 280 }, reader),
  ),
);

Props

ResizablePanels

Prop	Type	Default	Description
children	ReactNode	—	Required. ResizablePanel elements in order. Keep the set stable for the life of the group.
label	string	—	Accessible name for the group.
onLayoutChange	(sizes: number[]) => void	—	Each pane's share in percent after a resize settles.
className	string	—	Extra class on the group.

ResizablePanel (configuration only; the group renders it)

Prop	Type	Default	Description
id	string	—	Required. Stable id, used by the dividers' aria-controls.
label	string	—	Required. Names the pane for its divider.
defaultSize	number	—	Required. Starting share; shares are relative and need not sum to 100.
minSize / maxSize	number	—	Limits in px. Below minSize the content clips and fades instead of reflowing.
collapsible	boolean	—	Dragging well past the minimum, or flicking to the edge, snaps the pane closed; its divider then shows a restore tab.
defaultCollapsed	boolean	—	Start collapsed.
className, children			Pane class and content.

Notes

• The group needs a definite height from its parent.
• Each divider is a focusable separator: arrow keys resize, Home and End jump to the limits, Enter hides or restores a collapsible pane, and a double-click resets the layout.
• Dividers follow the pointer 1:1 and resist past limits. Reduced motion removes the settle animations.
• Reads --line, --line-strong, --surface, --ink, --ink-2, --shadow-resting.