Resizable

Split-pane layout on paneforge. Drag the handle to reflow siblings; while the handle is active the cursor is trapped, pointer-events stay live, and panes rebalance in real time.

API Reference Component Source

Usage

Left

Top

Bottom

resizable.svelte

<script lang="ts">
	import * as Resizable from '$lib/components/ui/resizable';
</script>

<Resizable.PaneGroup direction="horizontal">
	<Resizable.Pane defaultSize={50}>Left</Resizable.Pane>
	<Resizable.Handle />
	<Resizable.Pane defaultSize={50}>Right</Resizable.Pane>
</Resizable.PaneGroup>

Vertical

Top

Bottom

resizable-pane-group.svelte

<script lang="ts">
	import * as ResizablePrimitive from 'paneforge';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		this: paneGroup = $bindable(),
		class: className,
		...restProps
	}: ResizablePrimitive.PaneGroupProps & {
		this?: ResizablePrimitive.PaneGroup;
	} = $props();
</script>

<ResizablePrimitive.PaneGroup
	bind:ref
	bind:this={paneGroup}
	data-slot="resizable-pane-group"
	class={cn('flex h-full w-full data-[direction=vertical]:flex-col', className)}
	{...restProps}
/>

With handle pill

Pass withHandle on the resizer to show a draggable pill indicator.

Sidebar

Content

resizable-handle.svelte

<script lang="ts">
	import * as ResizablePrimitive from 'paneforge';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		this: paneGroup = $bindable(),
		class: className,
		...restProps
	}: ResizablePrimitive.PaneGroupProps & {
		this?: ResizablePrimitive.PaneGroup;
	} = $props();
</script>

<ResizablePrimitive.PaneGroup
	bind:ref
	bind:this={paneGroup}
	data-slot="resizable-pane-group"
	class={cn('flex h-full w-full data-[direction=vertical]:flex-col', className)}
	{...restProps}
/>

Resizable.PaneGroup props

Inherits paneforge PaneGroup props.

Type	Default	Description
`'horizontal' \| 'vertical'`	—	Layout axis of the group. Required.
`string`	—	Optional id for persisting pane sizes to localStorage.
`number`	`10`	Pixel or percent step used when resizing via keyboard arrows.
`string`	—	Merged onto the group via tailwind-merge.

Resizable.Pane props

Type	Default	Description
`number`	—	Initial size as a percentage (0 – 100).
`number`	—	Minimum size in percent. The handle refuses to shrink past it.
`number`	—	Maximum size in percent.
`boolean`	`false`	Allow the pane to collapse when dragged past the minimum.
`(size: number) => void`	—	Fires as the pane resizes. Receives the new percentage.

Resizable.Handle props

Prop	Type	Default	Description
	`boolean`	`false`	Render a visible pill on the handle to suggest drag affordance.
	`boolean`	`false`	Disables the resizer interactions.