Skip to main content

​
About

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

​
Usage

showLineNumbers
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
showLineNumbers
<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.
showLineNumbers
<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>

​
Handle

You can set or hide the handle by using the withHandle prop on the ResizableHandle component.
showLineNumbers
<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>

​
Links

Build docs developers (and LLMs) love

Get started for freeTalk to us