Resizable

A component that allows users to resize a container by dragging, supporting 2D resizing, aspect ratio locking, and panel splitting.

Basic Usage

Supports resizing in horizontal or vertical directions, or simultaneously in multiple directions.

Basic Resizable

300px x 200px

Example

Aspect Ratio Locking

You can lock the aspect ratio during resizing by setting the lock-aspect-ratio prop.

16:9 (300 x 169)

Example

Panel Splitting

Combine BrResizableSplit and BrResizableSplitPane to create a multi-panel split layout.

Sidebar

Keyboard navigation supported

Main Content

Terminal / Console

Example

Integration with Table

The Resizable component can be easily integrated with the Table component to create adaptive data grids.

Resizable Table Card

ID	Name	Role
1	John Doe	Developer
2	Jane Smith	Designer
3	Mike Johnson	Manager

Example

Integration with Card

Place a Card inside a resizable container and utilize internal scroll areas for more content.

Resizable Card

Drag the handle to resize this card component.

This is a card component nested inside a resizable container. Notice how the card header stays fixed while the content area scrolls if it overflows.

You can integrate the Resizable component with almost any other UI element to create dynamic layouts.

Example

API

Resizable Props

Name	Description	Type	Default
as	The HTML element to render	string	'div'
width / v-model:width	Container width	number | string	-
height / v-model:height	Container height	number | string	-
minWidth	Minimum width	number	0
maxWidth	Maximum width	number	Infinity
minHeight	Minimum height	number	0
maxHeight	Maximum height	number	Infinity
directions	Allowed resize directions	('top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right')[]	['right', 'bottom', 'bottom-right']
lockAspectRatio	Lock aspect ratio. Can be a boolean (locks initial ratio) or a specific numeric ratio	boolean | number	false
grid	Snapping grid size. Can be a single number or a [x, y] array	number | [number, number]	1
step	Keyboard resize step	number	10
disabled	Whether resizing is disabled	boolean	false

Resizable Emits

Name	Description	Callback Parameters
update:width	Fired when width changes	(width: number) => void
update:height	Fired when height changes	(height: number) => void
resizeStart	Fired when resizing starts	(event: { width: number; height: number; direction: string }) => void
resize	Fired during resizing	(event: { width: number; height: number; direction: string }) => void
resizeEnd	Fired when resizing ends	(event: { width: number; height: number; direction: string }) => void

ResizableHandle Props

Name	Description	Type	Default
direction	The direction the handle controls (used in non-Split mode)	string	-
split	Whether it acts as a handle for Split mode	boolean	false
withHandle	Whether to show the built-in icon in Split mode	boolean	false

ResizableSplit Props

Based on SplitterGroup from radix-vue. Passes through all its props.

Name	Description	Type	Default
direction	Split direction	'horizontal' | 'vertical'	-

ResizableSplitPane Props

Based on SplitterPanel from radix-vue. Passes through all its props.

Name	Description	Type	Default
defaultSize	Default size percentage	number	-
minSize	Minimum size percentage	number	0
maxSize	Maximum size percentage	number	100