Navigation & Layout
Resizable
A two-pane layout with a draggable divider between them.
Usage
Installation
Resizable comes with WunderUI Core and Pro, in the package from your plan. See the plans.
Then import what you need:
import { Resizable } from "@wunderui/react"Examples
Sidebar and content
Drag the handle — or focus it and use the arrow keys — to give the navigation more or less room.
Editor and terminal
The same handle, stacked: `direction="vertical"` splits top and bottom, and `side="end"` sizes the bottom panel.
Inspector on the right
`side="end"` keeps the fixed-width panel on the right — the pattern for property inspectors and detail panes.
Nested
A vertical split inside the content of a horizontal one — three panels, two handles.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Mail client
A message list and the open message; drag the divider.