8.0k New

Resizable

Previous Next

Accessible resizable panel groups and layouts with keyboard support.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor
One
Two
Three
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
 
<Resizable.PaneGroup direction="horizontal" class="max-w-sm rounded-lg border">
  <Resizable.Pane defaultSize={50}>
    <div class="flex h-[200px] items-center justify-center p-6">
      <span class="font-semibold">One</span>
    </div>
  </Resizable.Pane>
  <Resizable.Handle withHandle />
  <Resizable.Pane defaultSize={50}>
    <Resizable.PaneGroup direction="vertical">
      <Resizable.Pane defaultSize={25}>
        <div class="flex h-full items-center justify-center p-6">
          <span class="font-semibold">Two</span>
        </div>
      </Resizable.Pane>
      <Resizable.Handle withHandle />
      <Resizable.Pane defaultSize={75}>
        <div class="flex h-full items-center justify-center p-6">
          <span class="font-semibold">Three</span>
        </div>
      </Resizable.Pane>
    </Resizable.PaneGroup>
  </Resizable.Pane>
</Resizable.PaneGroup>

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 

pnpm dlx shadcn-svelte@latest add resizable

Usage 

<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>

Vertical

Use direction="vertical" for vertical resizing.

Header
Content
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
 
<Resizable.PaneGroup
  direction="vertical"
  class="min-h-[200px] max-w-sm rounded-lg border"
>
  <Resizable.Pane defaultSize={25}>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Header</span>
    </div>
  </Resizable.Pane>
  <Resizable.Handle />
  <Resizable.Pane defaultSize={75}>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Content</span>
    </div>
  </Resizable.Pane>
</Resizable.PaneGroup>

Handle

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

Sidebar
Content
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
 
<Resizable.PaneGroup
  direction="horizontal"
  class="min-h-[200px] max-w-sm rounded-lg border"
>
  <Resizable.Pane defaultSize={25}>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Sidebar</span>
    </div>
  </Resizable.Pane>
  <Resizable.Handle withHandle />
  <Resizable.Pane defaultSize={75}>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">Content</span>
    </div>
  </Resizable.Pane>
</Resizable.PaneGroup>