Split Pane

Name: Boreal UI
Author: Davin Chiupka

The SplitPane component divides a surface into resizable start and end panes.

Usage & Examples

Navigation

Preview panel

editor-layout.tsx

<SplitPane
    startPane={<strong>Navigation</strong>}
    endPane={<span>Preview panel</span>}
    defaultSize={42}
  />

Split Pane props API
				Default	Description
`children`	`ReactNode`	No	props	`—`	Fallback children. When two children are supplied, they are used as start/end panes.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultSize`	`number`	No	props	`50`	Initial size of the start pane as a percentage.
`disabled`	`boolean`	No	props	`false`	Whether the split pane is disabled.
`endPane`	`ReactNode`	No	props	`—`	Content rendered in the second pane.
`endPaneClassName`	`string`	No	props	`—`	Additional class name for the end pane.
`loading`	`boolean`	No	props	`false`	Whether the split pane should display a loading state.
`maxSize`	`number`	No	props	`90`	Maximum start pane size as a percentage.
`minSize`	`number`	No	props	`10`	Minimum start pane size as a percentage.
`onSizeChange`	`((size: number) => void)`	No	events	`—`	Callback fired when the pane size changes.
`orientation`	`"horizontal" \| "vertical"`	No	props	`"horizontal"`	Split orientation.