Splitter

Two resizable panes with a draggable divider. Drag or focus the handle and use the arrow keys. bind:size is the first pane's percentage. Horizontal or vertical.

Horizontal (35%)

Sidebar — drag the divider →

Content pane

<script>
  import { Splitter } from '@spaethtech/svelte-ui';
  let size = $state(35);
</script>

<Splitter bind:size class="h-64 border rounded">
  {#snippet start()}<aside>Sidebar</aside>{/snippet}
  {#snippet end()}<main>Content</main>{/snippet}
</Splitter>

Vertical

Top pane

Bottom pane — drag ↕