Skip to Content
UI DocsECHOResizable

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 via class for thickness, color, or hover effects.
  • Nest panel groups as needed for complex, adjustable layouts.