Resizable
Accessible resizable panel groups with keyboard support. Built on react-resizable-panels.
One
Two
<ResizablePanelGroup direction="horizontal" className="min-h-48 max-w-md rounded-lg border"> <ResizablePanel defaultSize={50}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">One</Text> </Flex> </ResizablePanel> <ResizableHandle /> <ResizablePanel defaultSize={50}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">Two</Text> </Flex> </ResizablePanel></ResizablePanelGroup>Usage
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@reva/ui";ResizablePanelGroup wraps two or more ResizablePanel components separated by a ResizableHandle. Use direction="horizontal" (default) or direction="vertical" to orient the group, and pass withHandle to ResizableHandle to render a visible drag affordance.
Composition
Use the following composition to build a Resizable layout:
ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanelExamples
Vertical
Header
Content
<ResizablePanelGroup direction="vertical" className="min-h-48 max-w-md rounded-lg border"> <ResizablePanel defaultSize={25}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">Header</Text> </Flex> </ResizablePanel> <ResizableHandle /> <ResizablePanel defaultSize={75}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">Content</Text> </Flex> </ResizablePanel></ResizablePanelGroup>With handle
Sidebar
Main
<ResizablePanelGroup direction="horizontal" className="min-h-48 max-w-md rounded-lg border"> <ResizablePanel defaultSize={50}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">Sidebar</Text> </Flex> </ResizablePanel> <ResizableHandle withHandle /> <ResizablePanel defaultSize={50}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">Main</Text> </Flex> </ResizablePanel></ResizablePanelGroup>Nested
One
Two
Three
<ResizablePanelGroup direction="horizontal" className="min-h-64 max-w-md rounded-lg border"> <ResizablePanel defaultSize={50}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">One</Text> </Flex> </ResizablePanel> <ResizableHandle withHandle /> <ResizablePanel defaultSize={50}> <ResizablePanelGroup direction="vertical"> <ResizablePanel defaultSize={25}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">Two</Text> </Flex> </ResizablePanel> <ResizableHandle withHandle /> <ResizablePanel defaultSize={75}> <Flex align="center" justify="center" className="h-full p-6"> <Text size="sm" weight="semibold">Three</Text> </Flex> </ResizablePanel> </ResizablePanelGroup> </ResizablePanel></ResizablePanelGroup>Props
ResizablePanelGroup, ResizablePanel, and ResizableHandle forward props to the underlying react-resizable-panels primitives (PanelGroup, Panel, and PanelResizeHandle). The most common props are listed below; see the upstream docs for the full surface (storage, callbacks, imperative refs).
ResizablePanelGroup
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "horizontal" | "vertical" | — | Orientation of the panel group. Required. |
autoSaveId | string | — | Persist panel sizes to localStorage under this key. |
id | string | — | Group identifier (required when persisting). |
onLayout | (sizes: number[]) => void | — | Fires when panel sizes change. |
ResizablePanel
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number | — | Initial size as a percentage of the group. |
minSize | number | 10 | Minimum size as a percentage. |
maxSize | number | 100 | Maximum size as a percentage. |
collapsible | boolean | false | Allow the panel to collapse below minSize. |
collapsedSize | number | 0 | Size when collapsed. |
onResize | (size: number) => void | — | Fires when the panel size changes. |
ResizableHandle
| Prop | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | false | Render a visible drag indicator inside the handle. |
disabled | boolean | false | Disables drag interaction. |