Resizable

When to use

Panels earn their place when a user genuinely rebalances two regions: a list beside a detail pane, an editor beside a preview, filters beside results. Fixed proportions should just be a grid, a temporary side surface is a Sheet, and collapsing app navigation is the Sidebar.

Platform notes

Pass withHandle as the demo does: the bare separator is a 1px bg-border line with a 4px hit area, a demanding pointer target, and the grip is also what makes the focused ring visible. The separator is keyboard operable (focus it, then arrow keys resize), so re-test that after overriding its className. Sizes are percentages of the group, so verify at sm and md: two panes that work on a desktop become two unusable slivers on a phone, where stacking with orientation="vertical" or not resizing at all is the honest answer. Nothing divides the panes except that border, which is the intent here, since elevation is border plus bg-card and shadow-* paints nothing.

Install

npx shadcn@latest add resizable

Code

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

export function ResizableDemo() {
  return (
    <ResizablePanelGroup orientation="horizontal" className="max-w-md rounded-lg border">
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[180px] items-center justify-center p-4 text-center text-sm">
          Left panel
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[180px] items-center justify-center p-4 text-center text-sm">
          Right panel
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

Full API

ui.shadcn.com/docs/components/resizable