Resizable

Resizable splits an area into panels people drag to resize or collapse / expand, horizontally or vertically.

Built on react-resizable-panels v4. A defaultSize / minSize string such as “30%” is a percentage; a number is pixels. The thin stroke-2 divider turns brand-colored on hover / drag. Keyboard, with the divider focused: the arrows resize by 5%, Home / End go to the limits, Enter collapses / expands, F6 moves to the next divider. Double-clicking a divider resets the panel to defaultSize. persistKey saves the layout to localStorage. In RTL, horizontal groups run right → left; dragging and the arrow keys follow the visible direction.

Content

Terminal

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Folders

Drag, then reload the page

Saved layout

persistKey writes the layout to localStorage after each drag (wrapped in try/catch); give each panel a fixed id. Drag, then reload the page.

Header

Content

Vertical with grip

orientation="vertical" and ResizableHandle withHandle.

الشريط الجانبي

المحتوى

RTL reverses the order

The first panel sits on the right; dragging and ArrowLeft / ArrowRight move the divider in the visible direction. mirrorInRtl={false} keeps the LTR layout of earlier versions.

Usage

Set minSize so a panel can't be dragged until its content disappears; make secondary panels (sidebar, terminal) collapsible.
Use collapseButton for panels people often hide / show; Enter on the divider does the same.
Give panels a fixed id when using persistKey; give a vertical group a container with a fixed height.

Don't

Don't split a group into more than 3–4 panels.
Don't leave out the ResizableHandle between two panels. In RTL, only the divider flips the drag direction.
Don't use Resizable for layouts people don't need to adjust.

Props

Prop · Type	Default	Description
ResizablePanelGroup.orientation"horizontal" \| "vertical"	Default: "horizontal"	Direction the panels are split in.
ResizablePanelGroup.persistKeystring	Default: —	Saves / restores the layout through localStorage (key react-resizable-panels:<persistKey>).
ResizablePanelGroup.mirrorInRtlboolean	Default: true	RTL: horizontal groups run right → left (dragging / arrow keys follow the visible direction); false keeps the LTR layout.
ResizablePanelGroup.onLayoutChanged(layout: Layout, meta) => void	Default: —	Called after a drag ends. Use it to save the layout your own way.
ResizablePanel.defaultSize / minSize / maxSizenumber \| string	Default: —	A string such as “30%” is a percentage, a number is px. Double-clicking the divider resets to defaultSize.
ResizablePanel.collapsible / collapsedSizeboolean / number \| string	Default: false / "0%"	Lets the panel collapse (drag past minSize, Enter, or the button).
ResizableHandle.withHandleboolean	Default: false	Shows a grip in the middle of the divider.
ResizableHandle.collapseButton"before" \| "after"	Default: —	Button that collapses / expands the panel before (above / at the start of the line) or after the divider; that panel must be collapsible.
ResizableHandle.collapseLabel / expandLabelstring	Default: "Collapse panel" / "Expand panel"	Tooltip text (title) of the button.
ResizableHandle.disabled / disableDoubleClickboolean	Default: false	Locks the divider / turns off the double-click reset.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.resizable

Key · Type	Default (English)	messagesVi
collapsestring Chú thích (title) nút thu gọn panel của ResizableHandle.	Default (English)`"Collapse panel"`	messagesVi`"Thu gọn panel"`
expandstring Chú thích (title) nút mở rộng panel của ResizableHandle.	Default (English)`"Expand panel"`	messagesVi`"Mở rộng panel"`