Resizable

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download resizable -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable";
function ResizablePlayground({
  orientation = "horizontal",
  defaultSize = 50,
  withHandle = true,
}: {
  orientation?: "horizontal" | "vertical";
  defaultSize?: number;
  withHandle?: boolean;
}) {
  const size = Math.max(10, Math.min(90, defaultSize));
  return (
    <ResizablePanelGroup
      key={`${orientation}-${size}`}
      orientation={orientation}
      style={{ width: 480, maxWidth: "100%", height: 280 }}
    >
      <ResizablePanel defaultSize={`${size}%`} minSize="10%">
        <div className="flex h-full items-center justify-center border p-4">
          First panel
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle={withHandle} />
      <ResizablePanel defaultSize={`${100 - size}%`} minSize="10%">
        <div className="flex h-full items-center justify-center border p-4">
          Second panel
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}
<ResizablePlayground orientation="horizontal" defaultSize={50} withHandle />;

Examples

Default

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable";
<ResizablePanelGroup
  orientation="horizontal"
  className="max-w-md rounded-lg border md:min-w-[450px]"
>
  <ResizablePanel defaultSize="50%">
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="50%">
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize="25%">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Two</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize="75%">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Three</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>;

Vertical

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable";
<ResizablePanelGroup
  orientation="vertical"
  className="h-[240px] max-w-md rounded-lg border md:min-w-[450px]"
>
  <ResizablePanel defaultSize="25%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Header</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="75%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Content</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>;

With Handle

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable";
<ResizablePanelGroup
  orientation="horizontal"
  className="h-[240px] max-w-md rounded-lg border md:min-w-[450px]"
>
  <ResizablePanel defaultSize="25%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Sidebar</span>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="75%">
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-semibold">Content</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.