Resizable

Accessible resizable panel groups with keyboard support. Panel sizes use percentage strings (e.g. defaultSize="50%").

Handle

Pass withHandle on ResizableHandle for a visible grip.

Installation

CLI

npx @sonojs/ui@latest add resizable

Also needsnpm i lucide-react react-resizable-panels@^4

Composition

structure

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

Usage

resizable.tsx

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

export function Example() {
  return (
    <ResizablePanelGroup orientation="horizontal">
      <ResizablePanel defaultSize="50%">One</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize="50%">Two</ResizablePanel>
    </ResizablePanelGroup>
  )
}

Props

Prop	Type	Default	Description
orientation	"horizontal" · "vertical"	"horizontal"	On `ResizablePanelGroup` — resize axis.
defaultSize	number · string	—	On `ResizablePanel` — initial size (prefer `"50%"`; bare numbers are pixels).
minSize	number · string	—	On `ResizablePanel` — minimum size constraint.
withHandle	boolean	false	On `ResizableHandle` — show a visible grip.