Resizable

Accessible resizable panel groups and layouts with keyboard support.

One

Two

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/resizable.json

Usage

Use for split layouts. Drag the handle between panels to resize.

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

export function Example() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="min-h-[200px] rounded-lg border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">One</div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">Two</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

Set orientation to horizontal or vertical. Pass withHandle on ResizableHandle for a visible grip.