Resizable
General-purpose split-pane panel groups with drag-to-resize handles. Built on react-resizable-panels with horizontal and vertical layouts, nested groups, and full keyboard accessibility — styled entirely with MoonUI design tokens.
Pro features
What the Pro version adds to this component.
Horizontal and Vertical Layouts
Switch the whole group between side-by-side and stacked panels with a single direction prop
Drag-to-Resize Handles
Smooth pointer dragging with an optional visible grip via the withHandle prop
Nested Groups
Compose complex IDE-style layouts by nesting panel groups inside individual panels
Min, Max, and Collapse
Constrain each panel with minSize and maxSize, or let it collapse entirely when collapsible
Persistent Layouts
Set autoSaveId to store a user's panel sizes and restore them automatically on the next visit
Keyboard Accessible
Handles are focusable separators that resize with the arrow keys and expose ARIA value semantics
Installation
Install via CLI
npx @moontra/moonui-cli add resizableUsage
Drag the handle to resize this panel.
Panels keep their proportions as the group is resized.
Examples
Horizontal Split
Two side-by-side panels separated by a draggable handle. Set direction to horizontal and give the wrapping container a fixed height so the panels are visible. withHandle renders the visible grip.
Vertical Split
Stack panels top to bottom by setting direction to vertical. The handle rotates automatically and resizes along the vertical axis.
Nested Groups (IDE Layout)
Compose a code editor layout by nesting a vertical ResizablePanelGroup inside a horizontal panel: a left explorer, plus an editor stacked over a terminal on the right.