Free and open-source React resizable panel components with keyboard-resizable handles, size limits and collapsible panels. Styled with Tailwind CSS.
Sidebar
15–40%
Content
at least 30%
Inspector
at least 15%
Installation
npx properui@latest add resizableVertical
Editor
Terminal
Use the arrow keys on the divider
Collapsible sidebar
Mark a panel collapsible to let it snap shut when it is dragged past half its minSize, or when Enter is pressed on
the handle. collapsedSize keeps room for an icon rail. onLayoutChange reports every panel's size in percent, ready to
store and pass back as defaultLayout.
Nested
Files
Preview
Details
Usage notes
ResizablePanel and ResizableHandle must be direct children of ResizablePanelGroup. Sizes are percentages of the
group; panels without a defaultSize share whatever the others leave. Each handle is a focusable separator with
aria-valuenow, aria-valuemin and aria-valuemax: the arrow keys move it by keyboardStep percent (mirrored in
right-to-left layouts), Home and End jump to the limits, and Enter collapses or restores a collapsible neighbour.