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#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/resizable
Copy

Usage#

Copy<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>

Copy<Resizable.PaneGroup direction="horizontal">
  <Resizable.Pane>One</Resizable.Pane>
  <Resizable.Handle />
  <Resizable.Pane>Two</Resizable.Pane>
</Resizable.PaneGroup>

Composition#

Use the following composition to build a PaneGroup:

CopyPaneGroup
├── Pane
├── Handle
└── Pane

Examples#

Vertical#

Use direction="vertical" for vertical resizing.

Handle#

Use the withHandle prop on Handle to show a visible handle.

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

See the PaneForge documentation for all available props and abilities of the Resizable component.