Resizable

A set of resizable panel components built on react-resizable-panels. Panels are arranged inside a group and separated by draggable handles that the user can grab to resize adjacent panels.

One

Two

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable"

export default function ResizableDemo() {
  return (
    <ResizablePanelGroup orientation="horizontal" className="max-w-md rounded-lg border">
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">Two</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Anatomy

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable"

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>Panel A</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Panel B</ResizablePanel>
</ResizablePanelGroup>

Examples

Horizontal layout

<ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Sidebar</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Content</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Vertical layout

<ResizablePanelGroup direction="vertical" className="min-h-[300px] max-w-md rounded-lg border">
  <ResizablePanel defaultSize={30}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Header</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={70}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Body</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

With visible drag handle

Pass withHandle to render a visible grab indicator on the separator.

<ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
  <ResizablePanel defaultSize={30} minSize={20}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Left</span>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={70} minSize={30}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Right</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

Three-panel layout

<ResizablePanelGroup direction="horizontal" className="min-h-[200px] rounded-lg border">
  <ResizablePanel defaultSize={25} minSize={15}>
    <div className="flex h-full items-center justify-center p-6">Sidebar</div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center p-6">Main</div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={25} minSize={15}>
    <div className="flex h-full items-center justify-center p-6">Inspector</div>
  </ResizablePanel>
</ResizablePanelGroup>

API Reference

ResizablePanelGroup

The container that holds panels and handles. Controls layout direction.

Prop	Type	Default	Description
`direction`	`"horizontal" \| "vertical"`	—	The axis along which panels are arranged.
`className`	`string`	—
`children`	`ReactNode`	—

Accepts all props from react-resizable-panels Group.

ResizablePanel

A single panel that can be resized. Size is specified as a percentage of the group.

Prop	Type	Default	Description
`defaultSize`	`number`	—	Initial size as a percentage (0--100).
`minSize`	`number`	—	Minimum size as a percentage.
`maxSize`	`number`	—	Maximum size as a percentage.
`collapsible`	`boolean`	—	When `true`, the panel can be collapsed past its minimum size.
`className`	`string`	—
`children`	`ReactNode`	—

Accepts all props from react-resizable-panels Panel.

ResizableHandle

The draggable separator between two panels.

Prop	Type	Default	Description
`withHandle`	`boolean`	—	When `true`, renders a visible grab indicator (a small rounded bar).
`className`	`string`	—

Accepts all props from react-resizable-panels Separator.