Resizable

One

Two

Three

import {	ResizableHandle,	ResizablePanel,	ResizablePanelGroup,} from "@/components/ui/resizable";
export function ResizableDemo() {	return (		<ResizablePanelGroup			orientation="horizontal"			className="max-w-sm rounded-lg border"		>			<ResizablePanel defaultSize="50%">				<div className="flex h-[200px] items-center justify-center p-6">					<span className="font-semibold">One</span>				</div>			</ResizablePanel>			<ResizableHandle withHandle />			<ResizablePanel defaultSize="50%">				<ResizablePanelGroup orientation="vertical">					<ResizablePanel defaultSize="25%">						<div className="flex h-full items-center justify-center p-6">							<span className="font-semibold">Two</span>						</div>					</ResizablePanel>					<ResizableHandle withHandle />					<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

pnpm dlx shadcn@latest add @herocn/resizable

Usage

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

<ResizablePanelGroup orientation="horizontal">  <ResizablePanel defaultSize="50%">One</ResizablePanel>  <ResizableHandle />  <ResizablePanel defaultSize="50%">Two</ResizablePanel></ResizablePanelGroup>

Composition

Use the following composition to build a ResizablePanelGroup:

ResizablePanelGroup├── ResizablePanel├── ResizableHandle└── ResizablePanel

Examples

Vertical

Use orientation="vertical" for vertical resizing.

Header

Content

import {	ResizableHandle,	ResizablePanel,	ResizablePanelGroup,} from "@/components/ui/resizable";
export function ResizableVertical() {	return (		<ResizablePanelGroup			orientation="vertical"			className="min-h-[200px] max-w-sm rounded-lg border"		>			<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>	);}

Handle

Use the withHandle prop on ResizableHandle to show a visible handle.

Sidebar

Content

import {	ResizableHandle,	ResizablePanel,	ResizablePanelGroup,} from "@/components/ui/resizable";
export function ResizableHandleDemo() {	return (		<ResizablePanelGroup			orientation="horizontal"			className="min-h-[200px] max-w-sm rounded-lg border"		>			<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>	);}

RTL

To enable RTL support in herocn, see the RTL configuration guide.

واحد

اثنان

ثلاثة

"use client";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	ResizableHandle,	ResizablePanel,	ResizablePanelGroup,} from "@/components/ui/resizable";
const translations: Translations = {	en: {		dir: "ltr",		values: {			one: "One",			two: "Two",			three: "Three",		},	},	ar: {		dir: "rtl",		values: {			one: "واحد",			two: "اثنان",			three: "ثلاثة",		},	},	he: {		dir: "rtl",		values: {			one: "אחד",			two: "שניים",			three: "שלושה",		},	},};
export function ResizableRtl() {	const { dir, t } = useTranslation(translations, "ar");
	return (		<ResizablePanelGroup			orientation="horizontal"			className="max-w-sm rounded-lg border"			dir={dir}		>			<ResizablePanel defaultSize="50%">				<div className="flex h-[200px] items-center justify-center p-6">					<span className="font-semibold">{t.one}</span>				</div>			</ResizablePanel>			<ResizableHandle withHandle />			<ResizablePanel defaultSize="50%">				<ResizablePanelGroup orientation="vertical" dir={dir}>					<ResizablePanel defaultSize="25%">						<div className="flex h-full items-center justify-center p-6">							<span className="font-semibold">{t.two}</span>						</div>					</ResizablePanel>					<ResizableHandle withHandle />					<ResizablePanel defaultSize="75%">						<div className="flex h-full items-center justify-center p-6">							<span className="font-semibold">{t.three}</span>						</div>					</ResizablePanel>				</ResizablePanelGroup>			</ResizablePanel>		</ResizablePanelGroup>	);}

API Reference

See the react-resizable-panels documentation.