ui
GitHub

Resizable

A group of panels with accessible, resizable layouts.

Docs
One
Two
Three
resizable-demo.tsx
import {
	ResizableHandle,
	ResizablePanel,
	ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export function ResizableDemo() {
	return (
		<ResizablePanelGroup
			direction="horizontal"
			className="max-w-md rounded-lg border md:min-w-[450px]"
		>
			<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}>
				<ResizablePanelGroup direction="vertical">
					<ResizablePanel defaultSize={25}>
						<div className="flex h-full items-center justify-center p-6">
							<span className="font-semibold">Two</span>
						</div>
					</ResizablePanel>
					<ResizableHandle />
					<ResizablePanel defaultSize={75}>
						<div className="flex h-full items-center justify-center p-6">
							<span className="font-semibold">Three</span>
						</div>
					</ResizablePanel>
				</ResizablePanelGroup>
			</ResizablePanel>
		</ResizablePanelGroup>
	)
}

Installation

npx shadcn@latest add @9ui/resizable

Usage

Imports
import {
	ResizableHandle,
	ResizablePanel,
	ResizablePanelGroup,
} from "@/components/ui/resizable"
Anatomy
<ResizablePanelGroup>
	<ResizablePanel />
	<ResizableHandle />
	<ResizablePanel />
</ResizablePanelGroup>

Examples

Vertical

Header
Content
resizable-vertical-demo.tsx
import {
	ResizableHandle,
	ResizablePanel,
	ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export function ResizableVerticalDemo() {
	return (
		<ResizablePanelGroup
			direction="vertical"
			className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
		>
			<ResizablePanel defaultSize={25}>
				<div className="flex h-full items-center justify-center p-6">
					<span className="font-semibold">Header</span>
				</div>
			</ResizablePanel>
			<ResizableHandle />
			<ResizablePanel defaultSize={75}>
				<div className="flex h-full items-center justify-center p-6">
					<span className="font-semibold">Content</span>
				</div>
			</ResizablePanel>
		</ResizablePanelGroup>
	)
}

With handle

Sidebar
Content
resizable-with-handle-demo.tsx
import {
	ResizableHandle,
	ResizablePanel,
	ResizablePanelGroup,
} from "@/components/ui/resizable"
 
export function ResizableWithHandleDemo() {
	return (
		<ResizablePanelGroup
			direction="horizontal"
			className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
		>
			<ResizablePanel defaultSize={25}>
				<div className="flex h-full items-center justify-center p-6">
					<span className="font-semibold">Sidebar</span>
				</div>
			</ResizablePanel>
			<ResizableHandle withHandle />
			<ResizablePanel defaultSize={75}>
				<div className="flex h-full items-center justify-center p-6">
					<span className="font-semibold">Content</span>
				</div>
			</ResizablePanel>
		</ResizablePanelGroup>
	)
}