Docs
Resizable

Resizable

Accessible resizable panel groups and layouts with keyboard support.

Loading...

About

The Resizable component is built on top of PaneForge by netronk. Visit the PaneForge documentation for all the available props and abilities of the Resizable component.

Installation

	npx svell@latest add resizable

Usage

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

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

Loading...
	<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable";
</script>
 
<Resizable.PaneGroup direction="vertical">
  <Resizable.Pane>One</Resizable.Pane>
  <Resizable.Handle withHandle />
  <Resizable.Pane>Two</Resizable.Pane>
</Resizable.PaneGroup>

Built & designed by shadcn. Ported to Svelte by netronk. The source code is available on GitHub.