Resizable

<ResizablePanelGroup direction="horizontal" class="h-40 max-w-md rounded-lg border">
  <ResizablePanel defaultSize={50}><div class="flex h-full items-center justify-center p-4">One</div></ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}><div class="flex h-full items-center justify-center p-4">Two</div></ResizablePanel>
</ResizablePanelGroup>

Resizable, draggable panel layouts.

Installation

railbase ui add resizable

Usage

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

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>Left</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>Right</ResizablePanel>
</ResizablePanelGroup>

Anatomy

Exported parts: ResizablePanelGroup · ResizablePanel · ResizableHandle