Resizable

Accessible resizable panel groups and layouts.

One

Two

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/resizable.json

Usage

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

<ResizablePanelGroup
  className="h-48 w-full max-w-md px-rounded-md px-border-md [--pixel-size:5px]"
  orientation="horizontal"
>
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-medium text-sm">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-full items-center justify-center p-6">
      <span className="font-medium text-sm">Two</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>