1<script lang="ts"> 2 import * as Resizable from './index.js'; 3</script> 4 5<Resizable.PaneGroup direction="horizontal" class="max-w-md rounded-lg border"> 6 <Resizable.Pane defaultSize={50}> 7 <div class="flex h-[200px] items-center justify-center p-6"> 8 <span class="font-semibold">One</span> 9 </div> 10 </Resizable.Pane> 11 <Resizable.Handle /> 12 <Resizable.Pane defaultSize={50}> 13 <Resizable.PaneGroup direction="vertical"> 14 <Resizable.Pane defaultSize={25}> 15 <div class="flex h-full items-center justify-center p-6"> 16 <span class="font-semibold">Two</span> 17 </div> 18 </Resizable.Pane> 19 <Resizable.Handle /> 20 <Resizable.Pane defaultSize={75}> 21 <div class="flex h-full items-center justify-center p-6"> 22 <span class="font-semibold">Three</span> 23 </div> 24 </Resizable.Pane> 25 </Resizable.PaneGroup> 26 </Resizable.Pane> 27</Resizable.PaneGroup> 28

Usage

Use resizable for split layouts. Built on PaneForge. Compose PaneGroup + Pane + Handle. Set direction to horizontal or vertical. Pass withHandle on Handle for a visible grip.

1<script lang="ts">
2	import * as Resizable from '~/components/resizable';
3</script>
4
5<Resizable.PaneGroup direction="horizontal" class="max-w-md rounded-lg border">
6	<Resizable.Pane defaultSize={50}>
7		<div class="flex h-[200px] items-center justify-center p-6">
8			<span class="font-semibold">One</span>
9		</div>
10	</Resizable.Pane>
11	<Resizable.Handle withHandle />
12	<Resizable.Pane defaultSize={50}>
13		<div class="flex h-[200px] items-center justify-center p-6">
14			<span class="font-semibold">Two</span>
15		</div>
16	</Resizable.Pane>
17</Resizable.PaneGroup>

Installation

Usage