Resizable

Component
About
Resizable split panels with draggable handles, min and max sizes and collapsible panes. Build IDE layouts, mail clients and editor sidebars.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Resizable to your project and fits it to your theme.
Code

How Resizable is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";

import * as React from "react";
import { ResizableGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";

export function ResizablePreview() {
  return (
    <div className="flex flex-col w-full max-w-4xl gap-6 p-4">
      {/* 1. Horizontal Split (Sidebar + Editor) */}
      <div className="flex flex-col h-[240px] border border-zinc-200 dark:border-white/[0.06] rounded-2xl overflow-hidden bg-zinc-50/50 dark:bg-[#0a0a0c]">
        <div className="border-b border-zinc-200 dark:border-white/[0.06] px-4 py-2 text-xs font-semibold text-zinc-900 dark:text-zinc-100 bg-white/40 dark:bg-[#070709]/40">
          Horizontal Split & Collapsible Panel
        </div>
        <div className="flex-1 overflow-hidden">
          <ResizableGroup direction="horizontal">
            <ResizablePanel defaultSize={30} minSize={20} collapsible className="bg-zinc-100/50 dark:bg-zinc-950/30 flex flex-col h-full">
              <div className="flex items-center justify-between border-b border-zinc-200/80 dark:border-white/[0.04] px-3 py-1.5 bg-zinc-200/30 dark:bg-black/10 select-none">
                <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">Explorer</span>
              </div>
              <div className="p-3 text-[11px] text-zinc-500 font-mono flex-1 overflow-auto space-y-2 select-none">
                <div className="text-[10px] text-zinc-400 dark:text-zinc-500 leading-normal mb-1">Double click handle or drag to collapse</div>
                <div className="flex items-center gap-1.5 text-zinc-700 dark:text-zinc-300 font-medium">
                  <span>📁</span> components
                </div>
                <div className="pl-4 flex items-center gap-1.5 text-zinc-700 dark:text-zinc-300">
                  <span>📄</span> Card.tsx
                </div>
                <div className="pl-4 flex items-center gap-1.5 text-zinc-700 dark:text-zinc-300">
                  <span>📄</span> Resizable.tsx
                </div>
              </div>
            </ResizablePanel>
            <ResizableHandle />
            <ResizablePanel defaultSize={70} className="bg-white dark:bg-[#0c0c0e] flex flex-col h-full">
              <div className="flex items-center border-b border-zinc-200/80 dark:border-white/[0.04] bg-zinc-50 dark:bg-black/20 select-none">
                <div className="flex items-center gap-1.5 border-r border-zinc-200/80 dark:border-white/[0.04] bg-white dark:bg-[#0c0c0e] px-3 py-1.5 text-[10px] font-semibold text-zinc-800 dark:text-zinc-200">
                  <span className="text-emerald-500 text-[9px] font-bold">TSX</span> Card.tsx
                </div>
              </div>
              <div className="p-4 text-[11px] text-zinc-600 dark:text-zinc-400 font-mono leading-relaxed flex-1 overflow-auto">
                <span className="text-violet-500 dark:text-violet-400">import</span> {"{ Card }"} <span className="text-violet-500 dark:text-violet-400">from</span> <span className="text-emerald-600 dark:text-emerald-400">"@wensity/ui"</span>;
                <br /><br />
                <span className="text-violet-500 dark:text-violet-400">export default function</span> <span className="text-sky-500 dark:text-sky-400">App</span>() {"{"}
                <br />
                &nbsp;&nbsp;<span className="text-violet-500 dark:text-violet-400">return</span> (
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;<span className="text-amber-600 dark:text-amber-400">Card</span>&gt;
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span className="text-amber-600 dark:text-amber-400">CardTitle</span>&gt;Main Editor&lt;/<span className="text-amber-600 dark:text-amber-400">CardTitle</span>&gt;
                <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/<span className="text-amber-600 dark:text-amber-400">Card</span>&gt;
                <br />
                &nbsp;&nbsp;);
                <br />
                {"}"}
              </div>
            </ResizablePanel>
          </ResizableGroup>
        </div>
      </div>

      {/* 2. Vertical Split & Multi Panel */}
      <div className="flex flex-col h-[340px] border border-zinc-200 dark:border-white/[0.06] rounded-2xl overflow-hidden bg-zinc-50/50 dark:bg-[#0a0a0c]">
        <div className="border-b border-zinc-200 dark:border-white/[0.06] px-4 py-2 text-xs font-semibold text-zinc-900 dark:text-zinc-100 bg-white/40 dark:bg-[#070709]/40">
          Multi Panel & Vertical Integration
        </div>
        <div className="flex-1 overflow-hidden">
          <ResizableGroup direction="horizontal">
            <ResizablePanel defaultSize={25} minSize={15} className="bg-zinc-100/50 dark:bg-zinc-950/30 flex flex-col h-full">
              <div className="flex items-center justify-between border-b border-zinc-200/80 dark:border-white/[0.04] px-3 py-1.5 bg-zinc-200/30 dark:bg-black/10 select-none">
                <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">File Tree</span>
              </div>
              <div className="p-3 text-[11px] text-zinc-600 dark:text-zinc-400 font-mono space-y-2 select-none">
                <div className="flex items-center gap-1.5 text-zinc-700 dark:text-zinc-300 font-medium">
                  📁 src
                </div>
                <div className="pl-4 flex items-center gap-1.5 text-zinc-700 dark:text-zinc-300">
                  📁 styles
                </div>
                <div className="pl-4 flex items-center gap-1.5 text-zinc-700 dark:text-zinc-300">
                  📄 main.ts
                </div>
                <div className="pl-4 flex items-center gap-1.5 text-zinc-700 dark:text-zinc-300 font-medium">
                  📁 tests
                </div>
              </div>
            </ResizablePanel>
            <ResizableHandle />
            <ResizablePanel defaultSize={75}>
              <ResizableGroup direction="vertical">
                <ResizablePanel defaultSize={70} className="bg-white dark:bg-[#0c0c0e] flex flex-col h-full">
                  <div className="flex items-center border-b border-zinc-200/80 dark:border-white/[0.04] bg-zinc-50 dark:bg-black/20 select-none">
                    <div className="flex items-center gap-1.5 border-r border-zinc-200/80 dark:border-white/[0.04] bg-white dark:bg-[#0c0c0e] px-3 py-1.5 text-[10px] font-semibold text-zinc-800 dark:text-zinc-200">
                      <span className="text-sky-500 text-[9px] font-bold">TS</span> main.ts
                    </div>
                  </div>
                  <div className="p-4 text-[11px] text-zinc-600 dark:text-zinc-400 font-mono leading-relaxed flex-1 overflow-auto">
                    <span className="text-violet-500 dark:text-violet-400">const</span> <span className="text-sky-500 dark:text-sky-400">server</span> = createServer();
                    <br />
                    server.listen(<span className="text-emerald-600 dark:text-emerald-400">9000</span>, () =&gt; {"{"}
                    <br />
                    &nbsp;&nbsp;console.log(<span className="text-emerald-600 dark:text-emerald-400">"Server running!"</span>);
                    <br />
                    {"}"});
                  </div>
                </ResizablePanel>
                <ResizableHandle />
                <ResizablePanel defaultSize={30} minSize={15} collapsible className="bg-zinc-50 dark:bg-[#060608] flex flex-col h-full">
                  <div className="flex items-center justify-between border-b border-zinc-200/80 dark:border-white/[0.04] px-3 py-1 bg-zinc-100/55 dark:bg-black/25 select-none">
                    <span className="text-[9px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">Terminal</span>
                  </div>
                  <div className="p-3 text-[10.5px] text-zinc-700 dark:text-zinc-300 font-mono space-y-1.5 flex-1 overflow-auto leading-normal">
                    <div className="flex items-center gap-1.5">
                      <span className="text-emerald-500">wensity-dev-env:~$</span> pnpm build
                    </div>
                    <div className="text-zinc-400 dark:text-zinc-500">
                      ✔ compiling typescript workspace...
                    </div>
                    <div className="text-zinc-400 dark:text-zinc-500">
                      ✔ bundling complete (12.4s)
                    </div>
                  </div>
                </ResizablePanel>
              </ResizableGroup>
            </ResizablePanel>
          </ResizableGroup>
        </div>
      </div>
    </div>
  );
}

/* ─── Individual Examples ──────────────────────────────────── */

export default function Demo() {
  return <ResizablePreview />;
}