Resizable
Accessible resizable panel groups and layouts with keyboard support.
One
Two
Three
"use client"
import {
ResizableHandle,
ResizablePanel,Usage
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel>One</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>Examples
Vertical
Use orientation="vertical" for vertical resizing.
Header
Content
"use client"
import {
ResizableHandle,
ResizablePanel,Handle
Use the withHandle prop on ResizableHandle to show a visible handle.
Sidebar
Content
"use client"
import {
ResizableHandle,
ResizablePanel,