benflux/ui
Layout

Resizable

Accessible resizable panel groups and layouts with keyboard support. Powered by react-resizable-panels.

Panel 1
Panel 2

Installation

npx benflux-ui add resizable

Usage

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

// Horizontal split
<ResizablePanelGroup direction="horizontal" className="h-40 rounded-lg border">
  <ResizablePanel defaultSize={33}>
    <div className="p-4">Panel 1</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>
    <div className="p-4">Panel 2</div>
  </ResizablePanel>
</ResizablePanelGroup>

// Vertical split
<ResizablePanelGroup direction="vertical" className="h-80 rounded-lg border">
  <ResizablePanel defaultSize={50}>Top</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Bottom</ResizablePanel>
</ResizablePanelGroup>