Components

Resizable

Split panels with a drag handle (react-resizable-panels). Horizontal or vertical layouts, with an optional grip handle.

Updated Jul 10, 2026 by Leonardo Posada

Variants

Left
Right
<ResizablePanelGroup orientation="horizontal" className="rounded-lg border">
  <ResizablePanel defaultSize={40}>Left</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={60}>Right</ResizablePanel>
</ResizablePanelGroup>

When to use

  • Prototypes with editor + preview split.
  • Any layout where the user should resize a section.

When not to use

  • Mobile — resizing panels doesn't map to touch.
  • Fixed dashboard layouts.

Usage

Do
  • Set sensible min/max sizes so panels can't disappear.
  • Show the grip handle for discoverability.
Don't
  • Don't nest resizable panels more than 2 levels deep.