Resizable

Accessible resizable panel groups with keyboard support.

shadcn/ui docs
One
Two
Three

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/resizable.json

About

The component is built on top of react-resizable-panels v4. If you are upgrading from an older version, rename the direction prop on ResizablePanelGroup to orientation.

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable'
<ResizablePanelGroup
  orientation="horizontal"
  className="rounded-base max-w-md border-2 border-border text-foreground shadow-shadow"
>
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center bg-background p-6">
      <span className="font-base">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize={25}>
        <div className="flex h-full items-center justify-center bg-background p-6">
          <span className="font-base">Two</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={75}>
        <div className="flex h-full items-center justify-center bg-background p-6">
          <span className="font-base">Three</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>