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.
ReorderableSlider