Resizable

Resizable panel groups and layouts with keyboard support

Source Code

react-resizable-panels

One

Two

Three

Four

Installation


pnpm add react-resizable-panels


pnpm add react-resizable-panels

Usage

Imports

/components/ui/resizable

import {
	ResizableHandle,
	ResizablePanel,
	ResizablePanelGroup,
} from "@/components/ui/resizable"

Code

/components/ui/resizable.tsx

<ResizablePanelGroup direction="horizontal">
	<ResizablePanel defaultSize={50} className="border-r">
		<ResizablePanelGroup direction="vertical">
			<ResizablePanel defaultSize={25}>
				<span className="font-semibold">One</span>
			</ResizablePanel>
			<ResizableHandle />
		</ResizablePanelGroup>
	</ResizablePanel>
	<ResizableHandle />
	<ResizablePanel defaultSize={50}>
		<ResizablePanelGroup direction="vertical">
			<ResizableHandle />
			<ResizablePanel defaultSize={75}>
				<span className="font-semibold">Four</span>
			</ResizablePanel>
		</ResizablePanelGroup>
	</ResizablePanel>
</ResizablePanelGroup>

Examples

Horizontal Resizable Panels

Sidebar

Body

Handle On Hover

Sidebar

Body

Toolbar

Props

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-