Resizable

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download resizable -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { ResizablePanelGroup } from "@/components/ui/resizable";
import { ResizablePanel } from "@/components/ui/resizable";
import { ResizableHandle } from "@/components/ui/resizable";
import * as UI from "@/components/ui/resizable";

const Component = UI.ResizablePanelGroup;

const args = {
  "direction": "horizontal",
  "defaultSize": 50,
  "withHandle": true,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { direction?: "horizontal" | "vertical" };
</script>

<template>
  <ResizablePanelGroup
    :key="args.direction + '-' + args.defaultSize"
    :direction="args.direction"
    style="width: 480px; max-width: 100%; height: 280px"
    ><ResizablePanel :default-size="args.defaultSize" :min-size="10"
      ><div class="flex h-full items-center justify-center border p-4">
        First panel
      </div></ResizablePanel
    ><ResizableHandle :with-handle="args.withHandle" /><ResizablePanel
      :default-size="100 - args.defaultSize"
      :min-size="10"
      ><div class="flex h-full items-center justify-center border p-4">
        Second panel
      </div></ResizablePanel
    ></ResizablePanelGroup
  >
</template>

Examples

Default

<script setup lang="ts">
import { ResizablePanelGroup } from "@/components/ui/resizable";
import { ResizablePanel } from "@/components/ui/resizable";
import { ResizableHandle } from "@/components/ui/resizable";
import * as UI from "@/components/ui/resizable";

const Component = UI.ResizablePanelGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ResizablePanelGroup
    direction="horizontal"
    class="max-w-md rounded-lg border md:min-w-[450px]"
  >
    <ResizablePanel :default-size="50">
      <div class="flex h-[200px] items-center justify-center p-6">
        <span class="font-semibold">One</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel :default-size="50">
      <ResizablePanelGroup direction="vertical">
        <ResizablePanel :default-size="25">
          <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Two</span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel :default-size="75">
          <div class="flex h-full items-center justify-center p-6">
            <span class="font-semibold">Three</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </ResizablePanel>
  </ResizablePanelGroup>
</template>

Vertical

<script setup lang="ts">
import { ResizablePanelGroup } from "@/components/ui/resizable";
import { ResizablePanel } from "@/components/ui/resizable";
import { ResizableHandle } from "@/components/ui/resizable";
import * as UI from "@/components/ui/resizable";

const Component = UI.ResizablePanelGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ResizablePanelGroup
    direction="vertical"
    class="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
  >
    <ResizablePanel :default-size="25">
      <div class="flex h-full items-center justify-center p-6">
        <span class="font-semibold">Header</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel :default-size="75">
      <div class="flex h-full items-center justify-center p-6">
        <span class="font-semibold">Content</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</template>

With Handle

<script setup lang="ts">
import { ResizablePanelGroup } from "@/components/ui/resizable";
import { ResizablePanel } from "@/components/ui/resizable";
import { ResizableHandle } from "@/components/ui/resizable";
import * as UI from "@/components/ui/resizable";

const Component = UI.ResizablePanelGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ResizablePanelGroup
    direction="horizontal"
    class="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
  >
    <ResizablePanel :default-size="25">
      <div class="flex h-full items-center justify-center p-6">
        <span class="font-semibold">Sidebar</span>
      </div>
    </ResizablePanel>
    <ResizableHandle :with-handle="true" />
    <ResizablePanel :default-size="75">
      <div class="flex h-full items-center justify-center p-6">
        <span class="font-semibold">Content</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

ResizableHandle

ResizablePanelGroup

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.