Component

Resizable

Drag-to-resize panel layout with a visual handle divider. Supports horizontal and vertical splits.

Usage

Use resizable panels for IDE-style layouts or side-by-side comparison views where users need to adjust proportions.

Playground

Preview

Sidebar

Drag the handle to resize.

Content

Main content area.

Configure

Direction

Split panels side-by-side or stacked vertically.

Code

<ResizablePanelGroup direction="horizontal" className="rounded-lg border h-40">
  <ResizablePanel defaultSize={30} minSize={15} className="p-4">
    <p className="text-sm font-medium">Sidebar</p>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={70} minSize={30} className="p-4">
    <p className="text-sm font-medium">Content</p>
  </ResizablePanel>
</ResizablePanelGroup>

Do

Set a minSize on each panel to prevent them from collapsing completely
Show a visible grip icon on the handle so the interaction is discoverable

Don't

Don't use resizable panels on mobile, use stacked layouts instead
Don't nest resizable groups more than 2 levels deep