Base Usage
import { h } from "preact"
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/comps/echo/resizable"
export function ResizableDemo() {
return (
<ResizablePanelGroup
direction="horizontal"
class="w-[340px] rounded-lg border border-gray-400 bg-white"
>
<ResizablePanel defaultSize={50}>
<div class="flex h-[200px] items-center justify-center">
<div class="font-bold" >One</div>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={50}>
<ResizablePanelGroup direction="vertical" class="w-full h-full">
<ResizablePanel defaultSize={25}>
<div class="flex h-full items-center justify-center">
<div class="font-bold">Two</div>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={75}>
<div class="flex h-full items-center justify-center">
<div class="font-bold">Three</div>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
)
}
Nested Panels (H + V)
import { h } from "preact"
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/comps/echo/resizable"
export function ResizableNestedDemo() {
return (
<ResizablePanelGroup
direction="horizontal"
class="w-[340px] rounded-lg border border-gray-400 bg-white"
>
<ResizablePanel defaultSize={50}>
<div class="flex h-[200px] items-center justify-center">
<div class="font-bold" >One</div>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={50}>
<ResizablePanelGroup direction="vertical" class="w-full h-full">
<ResizablePanel defaultSize={25}>
<div class="flex h-full items-center justify-center">
<div class="font-bold">Two</div>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={75}>
<ResizablePanelGroup direction="horizontal" class="w-full h-full">
<ResizablePanel defaultSize={25}>
<div class="flex h-full items-center justify-center">
<div class="font-bold">A</div>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={75}>
<div class="flex h-full items-center justify-center">
<div class="font-bold">B</div>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
)
}
Usage Notes
direction="horizontal" | "vertical"
controls splitter orientation.defaultSize
is percentage-based; resized values persist automatically.<ResizableHandle />
can be styled viaclass
for thickness, color, or hover effects.- Nest panel groups as needed for complex, adjustable layouts.