build69
Sign inGet API key
build69  /  Components  /  Layout & Surfaces  /  Resizable

Resizable

v1.0.2NewUpdated 26 Aug 2026

Resizable split-pane layout built on react-resizable-panels v4. Compose ResizablePanelGroup → ResizablePanel + ResizableHandle for master-detail workspaces, collapsible sidebars, and IDE-like layouts. Handles are keyboar

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedresizesplit-panepanelslayout+4

The default, out-of-the-box Resizable.

Recommended for+14
  • ✓Master-detail workspaces (invoice list + preview)
  • ✓Collapsible app sidebars
  • ✓Dashboards with user-adjustable panes
  • ✓POS / editor split views
Tags+6
resizesplit-panepanelslayoutdragseparatorworkspacedefault
Features+4
  • Horizontal & vertical groups
  • Keyboard resize (Arrows step, Home/End snap, Enter toggles collapsible neighbor)
  • Full role="separator" ARIA (aria-valuenow/min/max, aria-controls, orientation)
  • min / max size constraints in px, %, rem, vh…
  • Collapsible panels with collapsedSize snap
  • Layout persistence via autoSaveId (localStorage or custom storage, SSR-safe)
  • Nested groups
  • Grip pill visual via withHandle + hover/active/focus token states
  • Imperative API: useResizablePanelRef (collapse/expand/resize), useResizableGroupRef (get/setLayout)
  • Double-click a handle to reset the panel to its default size
Not recommended for−2
  • ✕Static page layout (use CSS grid/flex)
  • ✕Single-column mobile screens
  • ✕Simple show/hide panels (use Collapsible or Sheet)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Resizable" })

Usage

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/surfaces/resizable';

<ResizablePanelGroup direction="horizontal" autoSaveId="invoice-workspace" className="h-full rounded-lg border">
  <ResizablePanel id="list" defaultSize="35%" minSize="20%">{invoiceList}</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel id="preview" minSize="30%">{invoicePreview}</ResizablePanel>
</ResizablePanelGroup>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
direction

Group layout axis; defaults to horizontal

'horizontal' | 'vertical'—
autoSaveId

Persist group layout under this key (give each Panel a stable id)

string—
storage

Custom getItem/setItem store for persistence; defaults to localStorage

LayoutStorage—
defaultSize

Panel: initial size (number = px, "35" / "35%" = percent, any CSS unit string)

number | string—
minSize

Panel: minimum size

number | string—
maxSize

Panel: maximum size

number | string—
collapsible

Panel: snap to collapsedSize when dragged below minSize

boolean—
collapsedSize

Panel: size while collapsed; defaults to 0%

number | string—
withHandle

Handle: render the grip pill visual

boolean—
disabled

Handle/Panel: prevent resizing

boolean—

Related

Platform docsAll componentsSource files