Resizable

Resizable panel groups and layouts.

Installation

bash
npx shadcn@latest add resizable

Import

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

Horizontal

<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">  <ResizablePanel defaultSize={50}>    <div className="p-6">One</div>  </ResizablePanel>  <ResizableHandle />  <ResizablePanel defaultSize={50}>    <div className="p-6">Two</div>  </ResizablePanel></ResizablePanelGroup>

Three-Pane Layout

<ResizablePanelGroup direction="horizontal">  <ResizablePanel defaultSize={25}>Sidebar</ResizablePanel>  <ResizableHandle withHandle />  <ResizablePanel defaultSize={75}>    <ResizablePanelGroup direction="vertical">      <ResizablePanel defaultSize={60}>Content</ResizablePanel>      <ResizableHandle />      <ResizablePanel defaultSize={40}>Footer</ResizablePanel>    </ResizablePanelGroup>  </ResizablePanel></ResizablePanelGroup>

Props

ResizablePanelGroup

PROPTYPEDEFAULTDESCRIPTION
direction"horizontal" | "vertical"—Layout direction (required)

ResizablePanel

PROPTYPEDEFAULTDESCRIPTION
defaultSizenumber—Initial size as percentage
minSizenumber10Minimum size as percentage
maxSizenumber—Maximum size as percentage

ResizableHandle

PROPTYPEDEFAULTDESCRIPTION
withHandlebooleanfalseShow a visible drag handle