Splitter

Ready

Resizable panel splitter with horizontal and vertical orientations

Horizontal Splitter

Drag the handle to resize panels horizontally

Left Panel

50%

Right Panel

50%

Vertical Splitter

Drag the handle to resize panels vertically

Top Panel

30%

Bottom Panel

70%

Collapsible Panels

Double-click the handle to collapse/expand panels

Sidebar

Double-click handle to collapse

Main Content

Drag or double-click to resize

Usage

How to use the Splitter component

// Horizontal Splitter
<Splitter
  orientation="horizontal"
  defaultSizes={[50, 50]}
  minSizes={[100, 100]}
  onResize={(sizes) => console.log(sizes)}
>
  <div>Left Panel</div>
  <div>Right Panel</div>
</Splitter>

// Vertical Splitter
<Splitter
  orientation="vertical"
  defaultSizes={[30, 70]}
  minSizes={[80, 80]}
>
  <div>Top Panel</div>
  <div>Bottom Panel</div>
</Splitter>

// Collapsible Panels
<Splitter
  orientation="horizontal"
  collapsible
  collapseThreshold={20}
  onCollapse={(index) => console.log('Collapsed:', index)}
>
  <div>Sidebar</div>
  <div>Main Content</div>
</Splitter>

API Reference

Props

orientation-"horizontal" | "vertical" - Split direction (default: "horizontal")
defaultSizes-[number, number] - Initial panel sizes in % (default: [50, 50])
minSizes-[number, number] - Minimum panel sizes in px (default: [50, 50])
collapsible-boolean - Enable panel collapse on double-click (default: false)
collapseThreshold-number - % threshold for auto-collapse (default: 30)
gutterSize-number - Handle size in px (default: 8)
onResize-(sizes: [number, number]) => void - Resize callback
onCollapse-(index: number | null) => void - Collapse callback

Features

  • Drag handle to resize panels
  • Double-click handle to collapse panels (when collapsible enabled)
  • Automatic collapse when dragging beyond threshold
  • Smooth animations and transitions
  • Configurable minimum panel sizes
  • Works with any content inside panels