Documentation Index
Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
Use this file to discover all available pages before exploring further.
The Resizable component is built on top of PaneForge by Huntabyte. Visit the PaneForge documentation for all the available props and abilities of the Resizable component.
Installation
npx shadcn-svelte@next add resizable
Install paneforge
npm install paneforge@next -D
Copy and paste the component source
Copy and paste the component source code into your project.
<script lang="ts">
import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
<Resizable.PaneGroup direction="horizontal">
<Resizable.Pane>One</Resizable.Pane>
<Resizable.Handle />
<Resizable.Pane>Two</Resizable.Pane>
</Resizable.PaneGroup>
Examples
Vertical
Use the direction prop to set the direction of the resizable panels.
<script lang="ts">
import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
<Resizable.PaneGroup direction="vertical">
<Resizable.Pane>One</Resizable.Pane>
<Resizable.Handle />
<Resizable.Pane>Two</Resizable.Pane>
</Resizable.PaneGroup>
withHandle prop on the ResizableHandle component.
<script lang="ts">
import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
<Resizable.PaneGroup direction="vertical">
<Resizable.Pane>One</Resizable.Pane>
<Resizable.Handle withHandle />
<Resizable.Pane>Two</Resizable.Pane>
</Resizable.PaneGroup>