Resizable

Resizable panels are for workspaces where the right balance changes by task. The Swiss wrapper keeps the panel API close to react-resizable-panels, then adds quieter dividers and an optional handle treatment that fits the rest of the system.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={35}>Navigation</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={65}>Content</ResizablePanel>
</ResizablePanelGroup>

Why This Primitive Exists

Some interfaces should adapt without sending the user into a different layout mode.

• Use resizable panels for dense product surfaces like archives, operations tools, and review workspaces.
• Prefer them when two or more panes stay relevant, but the user may need to bias attention toward one of them.
• Avoid them for simple marketing or document pages where the split adds control without adding clarity.

Examples

Basic Horizontal Split

The baseline pattern is a side navigation or inspector paired with a larger work area.

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={38} minSize={24}>Sidebar</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={62} minSize={40}>Main panel</ResizablePanel>
</ResizablePanelGroup>

Vertical Stacks

Vertical groups work well when one pane summarizes the state and the other carries detail, activity, or logs.

<ResizablePanelGroup orientation="vertical">
  <ResizablePanel defaultSize={48}>Summary</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={52}>Activity</ResizablePanel>
</ResizablePanelGroup>

In Context

For product tools, resizable panels often sit inside a card or page shell rather than becoming a special full-screen system.

Guidance

Start With A Real Layout Need

• Add a resizable split when users genuinely need to rebalance adjacent panes.
• If one pane is rarely useful, hide or collapse it instead of making it resizable.
• Keep the default ratio sensible so the layout still works before anyone drags a handle.

Protect Minimum Sizes

• Set minSize for panes that need a readable lower bound.
• Use larger minimums for forms, tables, and inspectors with fixed metadata rows.
• Do not rely on the handle alone to keep a panel usable.

Keep Pane Roles Clear

• Use the left or top pane for navigation, lists, or overview.
• Use the right or bottom pane for editing, detail, or contextual review.
• Add the visible withHandle grip when the resize affordance should be more explicit.

API Reference

Exports

Notable Props

Visual Notes

The component family is intentionally close to react-resizable-panels, so the upstream panel persistence and callback props remain available.