Wensity

Resizable

Resizable panel layouts with splitters, snapping, and persistence.

resizablesplitterpaneldragcollapsiblepersistenceprimitive
Loading preview...

Examples

Practical examples and common states for the same installable component.

Horizontal

Splits layouts side-by-side using horizontal cursor resizes.

examples/resizable-horizontal.tsx
import { ResizableGroup, ResizablePanel, ResizableHandle } from "@/components/wensity/resizable";


export function ResizableHorizontal() {
  return (
    <div className="h-[160px] w-[340px] border border-zinc-200 bg-white dark:border-white/[0.06] dark:bg-[#0c0c0e] rounded-xl overflow-hidden">
      <ResizableGroup direction="horizontal">
        <ResizablePanel defaultSize={40} className="bg-zinc-50 dark:bg-[#111114] text-zinc-700 dark:text-zinc-500">Explorer</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={60} className="text-zinc-600 dark:text-zinc-400">Workspace</ResizablePanel>
      </ResizableGroup>
    </div>
  );
}

Vertical

Splits panels top-to-bottom using vertical handles.

examples/resizable-vertical.tsx
import { ResizableGroup, ResizablePanel, ResizableHandle } from "@/components/wensity/resizable";


export function ResizableVertical() {
  return (
    <div className="h-[180px] w-[300px] border border-zinc-200 bg-white dark:border-white/[0.06] dark:bg-[#0c0c0e] rounded-xl overflow-hidden">
      <ResizableGroup direction="vertical">
        <ResizablePanel defaultSize={60} className="text-zinc-600 dark:text-zinc-400">File.tsx</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={40} className="bg-zinc-50 dark:bg-[#111114] text-zinc-700 dark:text-zinc-500">Debugger</ResizablePanel>
      </ResizableGroup>
    </div>
  );
}

Multi Panel

Supports splitting across three or more panels synchronously.

examples/resizable-multi-panel.tsx
import { ResizableGroup, ResizablePanel, ResizableHandle } from "@/components/wensity/resizable";


export function ResizableMultiPanel() {
  return (
    <div className="h-[160px] w-[340px] border border-zinc-200 bg-white dark:border-white/[0.06] dark:bg-[#0c0c0e] rounded-xl overflow-hidden">
      <ResizableGroup direction="horizontal">
        <ResizablePanel defaultSize={20} className="bg-zinc-50 dark:bg-[#111114] text-zinc-700 dark:text-zinc-500">Tree</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={60} className="text-zinc-600 dark:text-zinc-400">Editor</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={20} className="bg-zinc-50 dark:bg-[#111114] text-zinc-700 dark:text-zinc-500">Outline</ResizablePanel>
      </ResizableGroup>
    </div>
  );
}

Collapsible

Panel snaps shut to size 0 if dragged past its min size threshold.

examples/resizable-collapsible.tsx
import { ResizableGroup, ResizablePanel, ResizableHandle } from "@/components/wensity/resizable";


export function ResizableCollapsible() {
  return (
    <div className="h-[160px] w-[340px] border border-zinc-200 bg-white dark:border-white/[0.06] dark:bg-[#0c0c0e] rounded-xl overflow-hidden">
      <ResizableGroup direction="horizontal">
        <ResizablePanel defaultSize={30} minSize={20} collapsible className="bg-zinc-50 dark:bg-[#111114] text-zinc-700 dark:text-zinc-500">Left</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={70} className="text-zinc-600 dark:text-zinc-400">Center Content</ResizablePanel>
      </ResizableGroup>
    </div>
  );
}

Persistent

Stores size mappings in localStorage to retain sizes across page reloads.

examples/resizable-persistent.tsx
import { ResizableGroup, ResizablePanel, ResizableHandle } from "@/components/wensity/resizable";


export function ResizablePersistent() {
  return (
    <div className="h-[160px] w-[340px] border border-zinc-200 bg-white dark:border-white/[0.06] dark:bg-[#0c0c0e] rounded-xl overflow-hidden">
      <ResizableGroup direction="horizontal" storageKey="workspace-layout">
        <ResizablePanel defaultSize={35} className="bg-zinc-50 dark:bg-[#111114] text-zinc-700 dark:text-zinc-500">Persistent Sidebar</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={65} className="text-zinc-600 dark:text-zinc-400">Reload page to verify</ResizablePanel>
      </ResizableGroup>
    </div>
  );
}