Containment

Resizable

A split view whose panels you drag, with a layout it remembers.

Full reference: every prop and when to use it →

Walkthrough

1. Basic

A sidebar and its content. Drag the handle, or focus it and use the arrow keys; autoSaveId remembers the layout in localStorage, so a pane someone dragged is still there tomorrow.

Sidebar

Drag the handle

1<script lang="ts">2	import { ResizablePanelGroup, ResizablePanel, ResizableHandle, Text } from 'omaris';3</script>45<div class="h-64 w-full overflow-hidden rounded-shape-lg border border-border">6	<ResizablePanelGroup autoSaveId="docs-resizable-basic">7		<ResizablePanel defaultSize={30} min={18}>8			<div class="flex h-full items-center justify-center bg-surface-container-low">9				<Text variant="body-sm" tone="muted">Sidebar</Text>10			</div>11		</ResizablePanel>12		<ResizableHandle withHandle label="Resize sidebar" />13		<ResizablePanel>14			<div class="flex h-full items-center justify-center">15				<Text variant="body-sm" tone="muted">Drag the handle</Text>16			</div>17		</ResizablePanel>18	</ResizablePanelGroup>19</div>

2. Snapping and pixel limits

snapPoints pull the handle onto a share as it comes near — the line pulses as it lands — and min="200px" is a floor in pixels that holds however the group is resized. The readout is onLayout.

snaps at 25 · 50 · 75, never under 200px

takes whatever is left

1<script lang="ts">2	import { ResizablePanelGroup, ResizablePanel, ResizableHandle, Text } from 'omaris';34	let sizes = $state<number[]>([]);5</script>67<div class="flex w-full flex-col gap-3">8	<div class="h-56 w-full overflow-hidden rounded-shape-lg border border-border">9		<ResizablePanelGroup bind:sizes>10			<ResizablePanel defaultSize={40} min="200px" snapPoints={[25, 50, 75]}>11				<div12					class="flex h-full flex-col items-center justify-center gap-1 bg-surface-container-low"13				>14					<Text variant="title-md" tabular>{Math.round(sizes[0] ?? 0)}%</Text>15					<Text variant="label-sm" tone="muted">snaps at 25 · 50 · 75, never under 200px</Text>16				</div>17			</ResizablePanel>18			<ResizableHandle withHandle />19			<ResizablePanel min={15}>20				<div class="flex h-full flex-col items-center justify-center gap-1">21					<Text variant="title-md" tabular>{Math.round(sizes[1] ?? 0)}%</Text>22					<Text variant="label-sm" tone="muted">takes whatever is left</Text>23				</div>24			</ResizablePanel>25		</ResizablePanelGroup>26	</div>27	<Text variant="body-sm" tone="muted" tabular>28		{sizes.map((size) => `${size.toFixed(1)}%`).join(' · ')}29	</Text>30</div>

3. Collapsible sidebar

bind:collapsed opens and shuts a collapsible panel from a toolbar button, and stays true to a drag that shuts it by hand. The group's reset() puts every panel back at its default.

Inbox

Folders

Messages

1<script lang="ts">2	import {3		Button,4		IconButton,5		ResizablePanelGroup,6		ResizablePanel,7		ResizableHandle,8		Text9	} from 'omaris';1011	let group = $state<ResizablePanelGroup>();12	let collapsed = $state(false);13</script>1415<div class="flex w-full flex-col overflow-hidden rounded-shape-lg border border-border">16	<div class="flex items-center gap-2 border-b border-border bg-surface-container-low px-2 py-1.5">17		<IconButton18			aria-label={collapsed ? 'Show sidebar' : 'Hide sidebar'}19			aria-pressed={!collapsed}20			onclick={() => (collapsed = !collapsed)}21		>22			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">23				<rect x="3" y="5" width="18" height="14" rx="2" />24				<path d="M9 5v14" />25			</svg>26		</IconButton>27		<Text variant="title-sm" class="flex-1">Inbox</Text>28		<Button variant="text" size="xs" onclick={() => group?.reset()}>Reset layout</Button>29	</div>30	<div class="h-56 w-full">31		<ResizablePanelGroup bind:this={group}>32			<ResizablePanel defaultSize={28} min={18} collapsible bind:collapsed>33				<div class="flex h-full items-center justify-center bg-surface-container-low">34					<Text variant="body-sm" tone="muted">Folders</Text>35				</div>36			</ResizablePanel>37			<ResizableHandle withHandle label="Resize sidebar" />38			<ResizablePanel>39				<div class="flex h-full items-center justify-center">40					<Text variant="body-sm" tone="muted">41						{collapsed ? 'Sidebar hidden — drag the edge to bring it back' : 'Messages'}42					</Text>43				</div>44			</ResizablePanel>45		</ResizablePanelGroup>46	</div>47</div>

4. Nested

Groups nest, so a three-pane inbox is two groups and nothing else.

Folders

Message list

Preview

1<script lang="ts">2	import { ResizablePanelGroup, ResizablePanel, ResizableHandle, Text } from 'omaris';3</script>45<div class="h-72 w-full overflow-hidden rounded-shape-lg border border-border">6	<ResizablePanelGroup>7		<ResizablePanel defaultSize={28} min={20}>8			<div class="flex h-full items-center justify-center bg-surface-container-low">9				<Text variant="body-sm" tone="muted">Folders</Text>10			</div>11		</ResizablePanel>12		<ResizableHandle withHandle />13		<ResizablePanel>14			<ResizablePanelGroup direction="vertical">15				<ResizablePanel defaultSize={45}>16					<div class="flex h-full items-center justify-center">17						<Text variant="body-sm" tone="muted">Message list</Text>18					</div>19				</ResizablePanel>20				<ResizableHandle withHandle />21				<ResizablePanel>22					<div class="flex h-full items-center justify-center bg-surface-container-low">23						<Text variant="body-sm" tone="muted">Preview</Text>24					</div>25				</ResizablePanel>26			</ResizablePanelGroup>27		</ResizablePanel>28	</ResizablePanelGroup>29</div>

5. Vertical and persisted

direction="vertical" stacks the panels; the handle turns with them and the up and down arrows drive it. autoSaveId keeps this split across reloads, and onLayout reports every settled layout.

Editor

Terminal

onLayout → …

1<script lang="ts">2	import { ResizablePanelGroup, ResizablePanel, ResizableHandle, Text } from 'omaris';34	let sizes = $state<number[]>([]);5</script>67<div class="flex w-full flex-col gap-3">8	<div class="h-72 w-full overflow-hidden rounded-shape-lg border border-border">9		<ResizablePanelGroup10			direction="vertical"11			autoSaveId="docs-resizable-vertical"12			onLayout={(next) => (sizes = next)}13		>14			<ResizablePanel defaultSize={60} min={20}>15				<div class="flex h-full items-center justify-center">16					<Text variant="body-sm" tone="muted">Editor</Text>17				</div>18			</ResizablePanel>19			<ResizableHandle withHandle label="Resize terminal" />20			<ResizablePanel min={15} collapsible collapsedSize={0}>21				<div class="flex h-full items-center justify-center bg-surface-container-low">22					<Text variant="body-sm" tone="muted">Terminal</Text>23				</div>24			</ResizablePanel>25		</ResizablePanelGroup>26	</div>27	<Text variant="body-sm" tone="muted" tabular>28		onLayout → {sizes.map((size) => `${size.toFixed(1)}%`).join(' / ') || '…'}29	</Text>30</div>

6. Overridden

Every part is reachable. hitArea={16} widens the pointer target without touching the line, classes restyles the line and the grip, and a disabled group keeps its layout but nothing in it moves.

Wide hit area

Restyled line and grip

Disabled group

Nothing here moves

1<script lang="ts">2	import { ResizablePanelGroup, ResizablePanel, ResizableHandle, Text } from 'omaris';3</script>45<div class="flex w-full flex-col gap-4">6	<div class="h-48 w-full overflow-hidden rounded-shape-lg border border-border">7		<ResizablePanelGroup>8			<ResizablePanel defaultSize={35} min={20}>9				<div class="flex h-full items-center justify-center bg-surface-container-low">10					<Text variant="body-sm" tone="muted">Wide hit area</Text>11				</div>12			</ResizablePanel>13			<ResizableHandle14				withHandle15				hitArea={16}16				classes={{17					root: 'bg-surface-container after:bg-tertiary/40 hover:after:bg-tertiary data-dragging:after:bg-tertiary',18					grip: 'h-12 w-2 bg-tertiary/60 group-hover/handle:bg-tertiary group-data-dragging/handle:bg-tertiary'19				}}20			/>21			<ResizablePanel>22				<div class="flex h-full items-center justify-center">23					<Text variant="body-sm" tone="muted">Restyled line and grip</Text>24				</div>25			</ResizablePanel>26		</ResizablePanelGroup>27	</div>2829	<div class="h-32 w-full overflow-hidden rounded-shape-lg border border-border">30		<ResizablePanelGroup disabled sizes={[40, 60]}>31			<ResizablePanel>32				<div class="flex h-full items-center justify-center bg-surface-container-low">33					<Text variant="body-sm" tone="muted">Disabled group</Text>34				</div>35			</ResizablePanel>36			<ResizableHandle withHandle />37			<ResizablePanel>38				<div class="flex h-full items-center justify-center">39					<Text variant="body-sm" tone="muted">Nothing here moves</Text>40				</div>41			</ResizablePanel>42		</ResizablePanelGroup>43	</div>44</div>