Resizable

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

CLI
Manual

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.

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>

Get Started

Components

Customization

CLI

Advanced

Resources

About

Installation

Usage

Examples

Vertical

Handle

Links

​About

​Installation

​Usage

​Examples

​Vertical

​Handle

​Links

About

Installation

Usage

Examples

Vertical

Handle

Links