Command Palette

Search for a command to run...

Resizable

shadcn/ui

Accessible resizable panel groups and layouts with keyboard support.

One
Two

import {	ResizablePanelGroup,	ResizablePanel,	ResizableHandle,} from "@/registry/optics/resizable";<ResizablePanelGroup direction="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 />	<ResizablePanel defaultSize={50}>		<div className="flex h-[200px] items-center justify-center p-6">			<span className="font-semibold">Two</span>		</div>	</ResizablePanel></ResizablePanelGroup>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/resizable.json

Props

<ResizablePanelGroup />
Name
Type
className
string
direction
"horizontal" | "vertical"
autoSaveId
string

<ResizablePanel />
Name
Type
defaultSize
number
minSize
number
maxSize
number
collapsible
boolean
collapsedSize
number
<ResizableHandle />
Name
Type
className
string
withHandle
boolean