Resizable
Resizable panel groups with draggable handles.
Sidebar Drag the divider →
Content
<script lang="ts">
import * as Resizable from "$lib/components/ui/resizable";
</script>
<Resizable.PaneGroup
direction="horizontal"
class="h-52 w-full max-w-md overflow-hidden rounded-3xl bg-(--text)/5"
>
<Resizable.Pane defaultSize={35} minSize={20}>
<div class="flex h-full flex-col gap-1 p-5 text-sm tracking-[-0.39px]">
<span class="font-medium text-(--text)">Sidebar</span>
<span class="text-(--text)/56">Drag the divider →</span>
</div>
</Resizable.Pane>
<Resizable.Handle />
<Resizable.Pane defaultSize={65}>
<div
class="flex h-full items-center justify-center p-5 text-sm font-medium tracking-[-0.39px] text-(--text)/72"
>
Content
</div>
</Resizable.Pane>
</Resizable.PaneGroup>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initAdd the PaneForge dependency, then copy the source into $lib/components/ui/resizable.
npm install paneforgeUsage
<script lang="ts">
import * as Resizable from '$lib/components/ui/resizable';
</script>
<Resizable.PaneGroup direction="horizontal">
<Resizable.Pane defaultSize={50}>One</Resizable.Pane>
<Resizable.Handle withHandle />
<Resizable.Pane defaultSize={50}>Two</Resizable.Pane>
</Resizable.PaneGroup>