Resizable
Accessible resizable panel groups and layouts, built on react-resizable-panels.
Last updated August 8, 2026
CreditsUnchangedPublished
Copied from shadcn/ui.
Overview
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
export function ResizableDemoExample() {
return (
<ResizablePanelGroup
direction="horizontal"
className="h-40 w-full max-w-sm rounded-lg border border-border"
>
<ResizablePanel defaultSize={50}>
<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
Sidebar
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50}>
<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
Content
</div>
</ResizablePanel>
</ResizablePanelGroup>
)
}Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/resizable.jsonUsage
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
export function Example() {
return (
<ResizablePanelGroup direction="horizontal" className="h-40">
<ResizablePanel defaultSize={50}>Sidebar</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50}>Content</ResizablePanel>
</ResizablePanelGroup>
)
}Vertical
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
export function ResizableVerticalExample() {
return (
<ResizablePanelGroup
direction="vertical"
className="h-52 w-full max-w-sm rounded-lg border border-border"
>
<ResizablePanel defaultSize={35}>
<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
Header
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={65}>
<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
Content
</div>
</ResizablePanel>
</ResizablePanelGroup>
)
}RTL
The drag handle's centering is direction-agnostic, and the panel order visually flips along with the surrounding layout under RTL.
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
export function ResizableRtlExample() {
return (
<ResizablePanelGroup
direction="horizontal"
className="h-40 w-full max-w-sm rounded-lg border border-border"
>
<ResizablePanel defaultSize={50}>
<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
نوار کناری
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50}>
<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
محتوا
</div>
</ResizablePanel>
</ResizablePanelGroup>
)
}