SplitPane Experimental

Resizable split layout with a draggable divider. Supports horizontal (side-by-side) and vertical (stacked) directions with configurable min/max size constraints.

import { SplitPane } from 'phoundry-ui';

Horizontal (default)

Sidebar

Main content area

<SplitPane defaultSize={200}>
  {#snippet first()}
    <div class="p-4">Sidebar</div>
  {/snippet}
  {#snippet second()}
    <div class="p-4">Main content</div>
  {/snippet}
</SplitPane>

Vertical

Top pane

Bottom pane

<SplitPane direction="vertical" defaultSize={150}>
  {#snippet first()}
    <div class="p-4">Top pane</div>
  {/snippet}
  {#snippet second()}
    <div class="p-4">Bottom pane</div>
  {/snippet}
</SplitPane>

Handle size

Increase handleSize for touch-heavy layouts-. The hit target grows while the visible groove stays styled.

Wide handle

Drag the padded divider

<SplitPane handleSize={16} defaultSize={200}>...</SplitPane>

Controlled Size

Width: 200px

Drag the handle to resize

<SplitPane bind:size={panelSize} min={80} max={400}>
  {#snippet first()}
    <div class="p-4">Width: {panelSize}px</div>
  {/snippet}
  {#snippet second()}
    <div class="p-4">Main</div>
  {/snippet}
</SplitPane>

Props

Prop	Type	Default	Description
direction	'horizontal' \| 'vertical'	'horizontal'	Split axis - horizontal is side-by-side, vertical is stacked.
size	number	-	Controlled size of the first pane in px (bindable).
defaultSize	number	250	Initial size when uncontrolled.
min	number	100	Minimum size of either pane in px.
max	number	-	Maximum size of the first pane in px.
onresize	(size: number) => void	-	Called during drag with the current size.
handleSize	number	8	Width/height of the drag handle in px.
class	string	-	Additional CSS classes on the container.
first required	Snippet	-	Content for the first (left/top) pane.
second required	Snippet	-	Content for the second (right/bottom) pane.

Usage tips

The first and second props are Svelte snippets - use {#snippet first()}...{/snippet} syntax.
The container must have a defined height (e.g. h-full, h-screen) for the split to render correctly.
Use bind:size for two-way binding to persist or display the pane size.
Set max to prevent the first pane from consuming the entire container.