Resizable

A resizable panel group divides an area into panels and places a handle between them. Users drag a handle to give one panel more room and its neighbor less, or they focus the handle and press the arrow keys. A double-click on a handle returns a panel that has a default size to that size. The group fills the width and the height of the element around it, so that element sets the size of the whole area.

UsageCopy Anchor Link

import {
	ResizableHandle,
	ResizablePanel,
	ResizablePanelGroup,
} from "@biem/ui/components/ui/resizable";

export function ResizableDefault() {
	return (
		<div className="h-40 w-full max-w-sm rounded-lg border">
			<ResizablePanelGroup>
				<ResizablePanel>
					<div className="flex h-full items-center justify-center overflow-hidden text-sm">
						Orders
					</div>
				</ResizablePanel>
				<ResizableHandle/>
				<ResizablePanel>
					<div className="flex h-full items-center justify-center overflow-hidden text-sm">
						Order details
					</div>
				</ResizablePanel>
			</ResizablePanelGroup>
		</div>
	);
}

ExamplesCopy Anchor Link

HorizontalCopy Anchor Link

Side-by-side panels suit layouts in which content benefits from width, such as a navigation next to the content it opens. The group uses this arrangement by default, and orientation set to "horizontal" states it explicitly.

VerticalCopy Anchor Link

Stacked panels suit content that benefits from height, such as a chart above the figures behind it. With orientation set to "vertical", users divide the height between the panels, so the element around the group needs a height of its own.

With HandleCopy Anchor Link

A visible grip makes the handle easy to find for users who rarely change a layout. The grip appears through withHandle and marks the place where a drag begins.

NestedCopy Anchor Link

A panel can hold a group of its own and divide its area along the other axis. Users then resize each level independently, for example the width of a sidebar and the height of two areas beside it.

Minimum SizeCopy Anchor Link

Some content loses its use below a certain size. Through minSize a panel keeps at least that size, and the handle stops as soon as the panel reaches it.

Maximum SizeCopy Anchor Link

A panel that grows without limit can push its neighbors out of view. Through maxSize it stops at a largest size, and the panels beside it keep the remaining space.

Panel Preview ModeCopy Anchor Link

Users judge a new layout best while they are still dragging. The panels therefore follow every movement of the pointer, which is the default behavior of resizePreviewMode with the value "panel".

Separator Preview ModeCopy Anchor Link

Panels with extensive content, such as large tables or charts, react more calmly when they change size only once. With the value "separator" of resizePreviewMode, a preview of the handle follows the pointer, and the panels take their new size when users release it.

Custom PreviewCopy Anchor Link

In separator mode, a drag shows a translucent copy of the handle by default. The preview prop of the handle replaces it with an element of its own, so the preview fits the product and marks where the panels will divide.

Larger Resize TargetCopy Anchor Link

A thin handle is hard to hit, especially on a touch screen. Through resizeTargetMinimumSize the area that starts a resize grows beyond the visible line, with separate sizes for a mouse and for touch input.

Without Resize CursorCopy Anchor Link

The group shows a resize cursor over a handle so that users recognize it as something to drag. Through disableCursor it keeps the regular pointer instead, and resizing works as before.

Without Double-Click ResetCopy Anchor Link

A double-click on a handle returns a panel to its default size and lets users undo their changes in one step. Where a layout should stay exactly as users left it, disableDoubleClick turns this reset off.

Layout While ResizingCopy Anchor Link

Some interfaces react to the layout while users are still dragging, for example to adapt content to the space it receives. For this purpose, onLayoutChange reports the size of every panel with each movement of the pointer.

Layout After ResizingCopy Anchor Link

A layout that users have arranged deserves to be kept for their next visit. The final layout arrives through onLayoutChanged once users release the pointer, so the application saves it once per change.

Current Panel SizeCopy Anchor Link

Content can adapt to the room its panel offers, for example with more columns in a wider panel. Through onResize a panel reports its size in pixels and as a percentage whenever it changes.

Disabled GroupCopy Anchor Link

Some layouts must stay fixed, for example while a process works on the data they show. The disabled prop of the group then locks every panel, for the pointer as well as for the keyboard.

Disabled PanelCopy Anchor Link

Within a flexible layout, one area can keep its size, such as a navigation with a fixed width. Set on a single panel, disabled holds that size whichever handle users drag, and the other panels share the remaining space.

Disabled HandleCopy Anchor Link

Sometimes only one boundary of a layout should stay in place. Users can no longer drag a handle that carries disabled, and keyboard focus passes over it, while the other handles still resize their panels.

API ReferenceCopy Anchor Link

ResizablePanelGroupCopy Anchor Link

ResizablePanelCopy Anchor Link

ResizableHandleCopy Anchor Link