Resizable

Layout

Utility

Compound component for creating resizable panel layouts. Supports horizontal and vertical orientations with draggable handles for adjusting panel sizes.

Preview

Horizontal resizable panels with draggable handle

Left Panel

This is a resizable panel. Drag the handle to resize.

Right Panel

Content adapts to panel size.

Vertical Layout

Stack panels vertically with resizable dividers

Top Panel

Vertical layout for stacked content.

Bottom Panel

Drag the handle to adjust heights.

Multiple Panels

Support for more than two resizable sections

Sidebar

Main Content

Right Panel

Props

Component API reference

ResizableGroup

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction for panels
`children*`	`ReactNode`	—	ResizablePanel and ResizableHandle components
`className`	`string`	—	Additional CSS classes

ResizablePanel

Prop	Type	Default	Description
`defaultSize`	`number`	`50`	Default size as percentage (0-100)
`minSize`	`number`	—	Minimum size in pixels
`maxSize`	`number`	—	Maximum size in pixels
`className`	`string`	—	Additional CSS classes

ResizableHandle

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Handle orientation (should match parent group)

Usage

Import and implementation example

import {
  ResizableGroup,
  ResizablePanel,
  ResizableHandle,
} from '@/components/ui/resizable'

export default function Example() {
  return (
    <>
      {/* Horizontal layout */}
      <ResizableGroup direction="horizontal" className="h-[400px]">
        <ResizablePanel defaultSize={50}>
          Left content
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={50}>
          Right content
        </ResizablePanel>
      </ResizableGroup>

      {/* Vertical layout */}
      <ResizableGroup direction="vertical" className="h-[400px]">
        <ResizablePanel defaultSize={60}>
          Top content
        </ResizablePanel>
        <ResizableHandle direction="vertical" />
        <ResizablePanel defaultSize={40}>
          Bottom content
        </ResizablePanel>
      </ResizableGroup>

      {/* Three panels */}
      <ResizableGroup direction="horizontal">
        <ResizablePanel defaultSize={25}>Sidebar</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={50}>Main</ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={25}>Right</ResizablePanel>
      </ResizableGroup>
    </>
  )
}

Features

Built-in functionality

Horizontal & vertical: Support for both layout directions
Draggable handles: Visual grip handles for intuitive resizing
Hover feedback: Color change on handle hover for interactivity
Multiple panels: Support for any number of resizable sections
Flexible content: Panels can contain any React content
Cursor indicators: Appropriate resize cursors for each direction

Accessibility

Keyboard and screen reader support

ARIA Attributes

role="separator" on resize handlesaria-orientation matching direction

Keyboard Navigation

Key	Action
`Tab`	Focus the resize handle
`Arrow Keys`	Resize panels (when handle focused)

Notes

Handles have visible focus states
Resize cursors indicate draggable direction
Panel content remains accessible during resize

Related Components

Splitter ScrollArea Card