Layout

Splitter

Resizable panels with a draggable divider. Supports horizontal and vertical layouts, minimum and maximum panel sizes, and resize callbacks.

Horizontal (drag the bar)

Left Panel

Drag the divider to resize.

Right Panel

Both panels have a 20% minimum.

Vertical

Top Panel

Bottom Panel

Installation

npx benflux-ui add splitter

Three panels

<Splitter>
  <SplitterPanel defaultSize={25} min={15}>
    Sidebar
  </SplitterPanel>
  <SplitterPanel defaultSize={50} min={30}>
    Editor
  </SplitterPanel>
  <SplitterPanel defaultSize={25} min={15}>
    Preview
  </SplitterPanel>
</Splitter>

With resize callback

<Splitter
  onResize={(sizes) => console.log("Resizing:", sizes)}
  onResizeEnd={(sizes) => console.log("Done:", sizes)}
>
  <SplitterPanel defaultSize={60}>Main</SplitterPanel>
  <SplitterPanel defaultSize={40}>Detail</SplitterPanel>
</Splitter>

Props — Splitter

Prop	Type	Default	Description
layout	"horizontal" \| "vertical"	"horizontal"	Direction of the split
onResize	(sizes: number[]) => void	—	Called continuously while dragging
onResizeEnd	(sizes: number[]) => void	—	Called when the drag is released

Props — SplitterPanel

Prop	Type	Default	Description
defaultSize	number	equal split	Initial panel size as a percentage
min	number	10	Minimum panel size as a percentage
max	number	90	Maximum panel size as a percentage