Navigation & LayoutPro

Resizable

A two-pane layout with a draggable divider between them.

Usage

Panel A

Panel B

bash

npm install @wunderui/react

Then import what you need:

tsx

import { Resizable } from "@wunderui/react"

Drag the handle — or focus it and use the arrow keys — to give the navigation more or less room.

Sidebar140 – 400 px

ContentTakes the remaining width.

The same handle, stacked: `direction="vertical"` splits top and bottom, and `side="end"` sizes the bottom panel.

EditorGrows as the terminal shrinks.

$ npm run devready on http://localhost:3000

`side="end"` keeps the fixed-width panel on the right — the pattern for property inspectors and detail panes.

CanvasFlexible.

Inspector180 – 360 px

A vertical split inside the content of a horizontal one — three panels, two handles.

Files

Preview

Console

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

A message list and the open message; drag the divider.

Pricing page copy

Q3 churn analysis

Onboarding emails

Design review notes

Q3 churn analysis

Drag the handle between the panes to give the message more room.