Resizable — Design System

Two-panel horizontal

Panel A

Panel B

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>Panel A</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>Panel B</ResizablePanel>
</ResizablePanelGroup>

With grip handle

Pass withHandle to ResizableHandle to render a visible drag grip. This helps users discover that the divider is draggable.

Sidebar

Main

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={25} minSize={15}>Sidebar</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={75}>Main</ResizablePanel>
</ResizablePanelGroup>

Three-panel layout

A sidebar + editor + inspector pattern common in IDEs and design tools. Each panel has minSize and maxSize constraints to keep the layout usable.

Explorer

src/

App.tsx

index.ts

Editor

Main content area

Inspector

TypeComponent

Props3

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={20} minSize={10} maxSize={30}>
    Explorer
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={55} minSize={30}>
    Editor
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={25} minSize={15} maxSize={35}>
    Inspector
  </ResizablePanel>
</ResizablePanelGroup>