Resizable Min Max Sizes - Min and max sizes

Pro

ResizablePanel with minSize and maxSize percentage constraints.

Shadcn Resizable Min Max Sizes component

Component data

ID
resizable/resizable-min-max-sizes
Access
pro
Created
May 23, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Resizable Min Max Sizes component design & features

This example uses the shadcn Resizable component with minSize and maxSize props on ResizablePanel to limit how far each region can be dragged. The sidebar is constrained between 20% and 40%, and the main panel has a 60% minimum.

Size constraints keep critical content readable in layouts where one panel must never shrink below a usable width, such as form sidebars or data tables beside filters.