Horizontal split
Left panel
Right panel
Vertical split
Top panel
Bottom panel
"use client"
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/preskok-ui/resizable"
export function ResizableDemo() {
return (
<div className="flex w-full max-w-2xl flex-col gap-6">
<div className="space-y-2">
<p className="text-muted-foreground text-sm">Horizontal split</p>
<ResizablePanelGroup
direction="horizontal"
className="min-h-[180px] rounded-lg border md:min-h-[200px]"
>
<ResizablePanel defaultSize={50} minSize={20}>
<div className="flex h-full items-center justify-center p-4">
<span className="text-sm font-medium">Left panel</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50} minSize={20}>
<div className="flex h-full items-center justify-center p-4">
<span className="text-sm font-medium">Right panel</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
<div className="space-y-2">
<p className="text-muted-foreground text-sm">Vertical split</p>
<ResizablePanelGroup
direction="vertical"
className="min-h-[240px] rounded-lg border"
>
<ResizablePanel defaultSize={45} minSize={20}>
<div className="flex h-full items-center justify-center p-4">
<span className="text-sm font-medium">Top panel</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={55} minSize={20}>
<div className="flex h-full items-center justify-center p-4">
<span className="text-sm font-medium">Bottom panel</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
</div>
)
}
Installation
CLI
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add resizable
Usage
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/registry/preskok/ui/preskok-ui/resizable"
export function ResizableExample() {
return (
<ResizablePanelGroup
direction="horizontal"
className="min-h-[200px] max-w-md rounded-lg border"
>
<ResizablePanel defaultSize={50} minSize={25}>
<div className="flex h-full items-center justify-center p-4">One</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50} minSize={25}>
<div className="flex h-full items-center justify-center p-4">Two</div>
</ResizablePanel>
</ResizablePanelGroup>
)
}Panels are powered by react-resizable-panels. Use direction on ResizablePanelGroup, optional withHandle on ResizableHandle for the grip affordance, and defaultSize / minSize on each ResizablePanel as needed.