arca-ui

Resizable

Resizable panels are a container surface. Keep dividers quiet, and let your content own the hierarchy.

Basic Usage

Folders
Inbox
Sent
Drafts
Archive
Threads
Welcome!
Thanks for signing up…
Paper Cut v10 notes
Invoice — January
Preview
Paper-like motion, calm hierarchy
One container owns elevation; inner controls stay flat.
Resizable layouts work best when the handle is clear but quiet — no heavy divider fighting your content.

Handle Recipes

The divider should stay subtle. You can hide it entirely and render a custom handle for cleaner compositions.

Subtle divider
Panel A
Panel B
Handle only
Panel A
Panel B
Custom handle
Panel A
Panel B

API Reference

Resizable is built on react-resizable-panels. Treat the panel group as the container, and keep panel contents flat.

Components

ComponentNotes
ResizablePanelGroupPass direction and style the container via className.
ResizablePanelUse defaultSize / minSize to define layout constraints.
ResizableHandleUse withHandle for the default grip, or provide custom children for bespoke handles.