Resizable

Ready

Part of Layout collection

Horizontal Panels

Resizable panels with draggable handles

Left Panel

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

Right Panel

Content adapts to panel size.

Vertical Panels

Stack panels vertically with resizable dividers

Top Panel

Vertical layout for stacked content.

Bottom Panel

Drag the handle to adjust heights.

Three Panels

Multiple resizable sections

Sidebar

Main Content

Right Panel

Features

  • Horizontal and vertical layouts
  • Draggable resize handles
  • Default, min, and max sizes
  • Visual hover feedback
  • Support for multiple panels

Usage

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

// Horizontal layout
<ResizableGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>
    Left content
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    Right content
  </ResizablePanel>
</ResizableGroup>

// Vertical layout
<ResizableGroup direction="vertical">
  <ResizablePanel defaultSize={60}>
    Top content
  </ResizablePanel>
  <ResizableHandle direction="vertical" />
  <ResizablePanel defaultSize={40}>
    Bottom content
  </ResizablePanel>
</ResizableGroup>