Resizable

Draggable resize handles for panel layouts, built on react-resizable-panels.

Panel one

Panel two

Panel three

Installation

Run the CLI

$npx particleui-cli add resizable

Usage

TSX

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

export default function Example() {
  return (
    <ResizablePanelGroup direction="horizontal" className="h-48 rounded-lg border">
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">One</div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-full items-center justify-center p-6">Two</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

Details

Source filecomponents/ui/resizable.tsx

Typeui

Categorieslayout, core

npm dependenciesreact-resizable-panels, lucide-react

Registry deps

Claude skill—