Resizable
layoutAccessible resizable panel groups and layouts with keyboard support.
Preview
Panel One
Panel Two
Installation
npm install @launchapp/design-systemImport
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@launchapp/design-system";Examples
Horizontal Panels
<ResizablePanelGroup orientation="horizontal" className="max-w-md rounded-lg border"> <ResizablePanel defaultSize={50}> <div className="flex h-[200px] items-center justify-center p-6"> <span className="font-semibold">Panel One</span> </div> </ResizablePanel> <ResizableHandle withHandle /> <ResizablePanel defaultSize={50}> <div className="flex h-[200px] items-center justify-center p-6"> <span className="font-semibold">Panel Two</span> </div> </ResizablePanel></ResizablePanelGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | The resize orientation for the panel group. |
onLayoutChange | (layout: number[]) => void | — | Callback when panel sizes change. |
defaultSize | number | — | Default panel size as a percentage (on ResizablePanel). |
minSize | number | — | Minimum size of the panel (on ResizablePanel). |
withHandle | boolean | false | Show a drag handle (on ResizableHandle). |