edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Resizable

Resizable panel groups with drag handles for flexible layouts.

Componentsdocsreact-resizable-panels.vercel.app/

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/resizable.json

Manual

API Reference

ResizablePanelGroup

Container that manages a group of resizable panels. Built on react-resizable-panels.

direction'horizontal' | 'vertical'Required

Panel layout direction

autoSaveIdstring

Auto-save layout to localStorage

onLayoutfunction

Called when layout changes

classNamestring

CSS class name

ResizablePanel

An individual resizable panel within the group.

defaultSizenumber

Initial size (percentage)

minSizenumber
=10

Minimum panel size (percentage)

maxSizenumber

Maximum panel size (percentage)

collapsibleboolean
=false

Allow panel to collapse

collapsedSizenumber
=0

Size when collapsed (%)

onCollapsefunction

Called when collapsed

onExpandfunction

Called when expanded

onResizefunction

Called during resize

ordernumber

Panel order for serialization

classNamestring

CSS class name

ResizableHandle

Draggable handle between two panels.

withHandleboolean
=false

Show grip icon

disabledboolean
=false

Disable resizing

classNamestring

CSS class name