Splitter

Layout

Utility

Resizable panel splitter with drag handles and collapsible support. Features horizontal and vertical orientations with configurable minimum sizes and smooth animations.

Preview

Horizontal splitter with draggable handle

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

Props

Splitter component API reference

Prop	Type	Default	Description
`children*`	`ReactNode`	—	Two child elements to split
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Split direction
`defaultSizes`	`[number, number]`	`[50, 50]`	Initial panel sizes as percentages
`minSizes`	`[number, number]`	`[50, 50]`	Minimum panel sizes in pixels
`collapsible`	`boolean`	`false`	Enable panel collapse on double-click
`collapseThreshold`	`number`	`30`	Percentage threshold for auto-collapse when dragging
`gutterSize`	`number`	`8`	Handle size in pixels
`onResize`	`(sizes: [number, number]) => void`	—	Callback fired during resize with current sizes
`onCollapse`	`(index: number \| null) => void`	—	Callback when a panel is collapsed or expanded
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { Splitter } from '@/components/ui/splitter'

export default function Example() {
  const [sizes, setSizes] = useState<[number, number]>([50, 50])

  return (
    <>
      {/* Horizontal splitter */}
      <Splitter
        orientation="horizontal"
        defaultSizes={[50, 50]}
        minSizes={[100, 100]}
        onResize={setSizes}
      >
        <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>
    </>
  )
}

Features

Built-in functionality

Drag to resize: Intuitive drag handles for resizing panels
Double-click collapse: Collapse panels with double-click when enabled
Auto-collapse threshold: Panels collapse automatically when dragged past threshold
Smooth animations: Animated transitions during resize and collapse
Minimum sizes: Configurable minimum pixel sizes for each panel
Size callbacks: Real-time resize and collapse callbacks
Two orientations: Horizontal and vertical split layouts
Dark mode: Full dark mode support

Accessibility

Keyboard and mouse interaction support

ARIA Attributes

role="separator" on drag handlearia-valuenow for current position

Keyboard Navigation

Key	Action
`Tab`	Focus the resize handle
`Arrow Keys`	Resize panels incrementally

Notes

Drag handle has clear visual feedback on hover and drag
Double-click provides alternative to precise dragging
Cursor changes to indicate drag direction
Panel content remains accessible during resize

Related Components

Resizable ScrollArea Card