Resizable

free

Resizable lets users drag a surface to adjust working space without leaving the page.

Sidebar

Content

import Resizable, {
  type ResizeHandleConfig,
} from '@/components/ui/resizable';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Resizable

pnpm dlx nateui@latest add Resizable

yarn dlx nateui@latest add Resizable

Examples

Default Handles

import Resizable from '@/components/ui/resizable';

const contentClassName = [
  'grid h-full place-items-center rounded-control border',

Handle Set

Only the configured edge and corner handles are rendered.

import Resizable, {
  type ResizeHandleConfig,
} from '@/components/ui/resizable';

Custom Handles

Custom resize points

Custom content replaces the visible square while the hitbox remains.

import Resizable, {
  type ResizeHandleConfig,
} from '@/components/ui/resizable';

Grouped

Sidebar

Editor

Content

import Resizable, {
  type ResizeHandleConfig,
} from '@/components/ui/resizable';

Controlled Size

Controlled panel

310px x 176px

import { useState } from 'react';
import Button from '@/components/ui/button';
import Resizable, {
  type ResizeCallback,

Grid

Grid snapped

Size changes land on a 24px rhythm.

import Resizable from '@/components/ui/resizable';

const contentClassName = [
  'flex h-full flex-col justify-between rounded-control border',

Bounds And Ratio

Aspect ratio stays locked inside the parent bounds.

import Resizable from '@/components/ui/resizable';

const parentClassName = [
  'relative h-72 w-full max-w-3xl overflow-hidden',

API

Resizable renders a positioned element with draggable handles. It can manage its own size from defaultSize, or accept a controlled size object and report changes through resize callbacks.

Prop	Description	Type	Default
`asElement`	Element or component used for the resizable root.	`ElementType`	`'div'`
`bounds`	Limits resizing to the parent, window, or a specific element.	`'parent' \| 'window' \| HTMLElement`	-
`boundsByDirection`	Applies directional bounds from the side being dragged.	`boolean`	`false`
`children`	Content rendered inside the resizable surface.	`ReactNode`	-
`className`	Class names applied to the root element.	`string`	-
`classNames`	Slot class names for the root, wrapper, and each handle.	`ResizableClassNames`	-
`defaultSize`	Initial uncontrolled size.	`Size`	`{ width: 'auto', height: 'auto' }`
`disabled`	Prevents handles from starting a resize interaction.	`boolean`	`false`
`handles`	Canonical handle configuration. Omit it for all default handles, pass `false` for no handles, or pass an explicit position list.	`false \| ResizeHandleConfig[]`	all directions
`enable`	Legacy direction map used when `handles` is not provided.	`Enable \| false`	all directions
`grid`	Snaps resize movement to horizontal and vertical steps.	`[number, number]`	`[1, 1]`
`gridGap`	Gap offset used when snapping to `grid`.	`[number, number]`	`[0, 0]`
`handleClasses`	Legacy alias for per-handle class names.	`HandleClassNames`	-
`handleClassNames`	Class names applied to individual handle hit areas.	`HandleClassNames`	-
`handleComponent`	Legacy alias for per-handle custom content.	`HandleComponents`	-
`handleComponents`	Legacy custom content map used when `handles` is not provided.	`HandleComponents`	-
`handleStyles`	Inline styles applied to individual handle hit areas.	`HandleStyles`	-
`handleWrapperClass`	Legacy alias for the handle wrapper class name.	`string`	-
`handleWrapperClassName`	Class names applied to the handle wrapper.	`string`	-
`handleWrapperStyle`	Inline styles applied to the handle wrapper.	`CSSProperties`	-
`lockAspectRatio`	Preserves the current ratio, or uses a provided ratio number.	`boolean \| number`	`false`
`lockAspectRatioExtraHeight`	Extra height included while preserving ratio.	`number`	`0`
`lockAspectRatioExtraWidth`	Extra width included while preserving ratio.	`number`	`0`
`maxHeight`	Maximum height as pixels or a CSS size.	`SizeValue`	-
`maxWidth`	Maximum width as pixels or a CSS size.	`SizeValue`	-
`minHeight`	Minimum height as pixels or a CSS size.	`SizeValue`	-
`minWidth`	Minimum width as pixels or a CSS size.	`SizeValue`	-
`onResize`	Called while a handle is dragged.	`ResizeCallback`	-
`onResizeStart`	Called before resizing starts; return `false` to cancel.	`ResizeStartCallback`	-
`onResizeStop`	Called when pointer interaction ends.	`ResizeCallback`	-
`ref`	Ref forwarded to the root element.	`Ref<HTMLElement>`	-
`resizeRatio`	Multiplier for pointer movement on each axis.	`number \| [number, number]`	`1`
`scale`	Pointer scale compensation for transformed parents.	`number`	`1`
`size`	Controlled size.	`Size`	-
`snap`	Snap points for width and height.	`{ x?: number[]; y?: number[] }`	-
`snapGap`	Maximum distance from a snap point before snapping applies.	`number`	`0`
`style`	Inline styles applied to the root element.	`CSSProperties`	-
`...nativeProps`	Native props for the rendered root element.	`ComponentPropsWithoutRef<E>`	-

Types

type ResizeDirection =
  | 'top'
  | 'right'
  | 'bottom'
  | 'left'
  | 'topRight'
  | 'bottomRight'
  | 'bottomLeft'
  | 'topLeft';
 
type ResizeHandleConfig = {
  position: ResizeDirection;
  handler?: false | ReactNode;
};
 
type Enable = Partial<Record<ResizeDirection, boolean>>;
 
type SizeValue = string | number;
 
type Size = {
  width?: SizeValue;
  height?: SizeValue;
};
 
type NumberSize = {
  width: number;
  height: number;
};
 
type ResizeCallback = (
  event: PointerEvent,
  direction: ResizeDirection,
  elementRef: HTMLElement,
  delta: NumberSize,
) => void;
 
type ResizeStartCallback = (
  event: ReactPointerEvent<HTMLElement>,
  direction: ResizeDirection,
  elementRef: HTMLElement,
) => void | boolean;
 
type HandleClassNames = Partial<Record<ResizeDirection, string>>;
type HandleComponents = Partial<Record<ResizeDirection, ReactNode>>;
type HandleStyles = Partial<Record<ResizeDirection, CSSProperties>>;
 
type ResizableClassNames = Partial<
  Record<'root' | 'handleWrapper' | ResizeDirection, string>
>;