shadcn-vue/apps/www/src/content/docs/components/resizable.md

title	description	source	primitive
Resizable	Accessible resizable panel groups and layouts with keyboard support.	apps/www/src/lib/registry/default/ui/resizable	https://www.radix-vue.com/components/splitter.html

Installation

npx shadcn-vue@latest add resizable

<template #Manual>

Install the following dependency:

npm install radix-vue

Copy and paste the following code into your project:

index.ts

<<< @/lib/registry/default/ui/resizable/index.ts

ResizablePanelGroup.vue

<<< @/lib/registry/default/ui/resizable/ResizablePanelGroup.vue

ResizableHandle.vue

<<< @/lib/registry/default/ui/resizable/ResizableHandle.vue

Usage

<script setup lang="ts">
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable'
</script>

<template>
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel>One</ResizablePanel>
    <ResizableHandle />
    <ResizablePanel>Two</ResizablePanel>
  </ResizablePanelGroup>
</template>

Examples

Vertical

Use the direction prop to set the direction of the resizable panels.

<script setup lang="ts">
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable'
</script>

<template>
  <ResizablePanelGroup direction="vertical">
    <ResizablePanel>One</ResizablePanel>
    <ResizableHandle />
    <ResizablePanel>Two</ResizablePanel>
  </ResizablePanelGroup>
</template>

Handle

You can set or hide the handle by using the withHandle prop on the ResizableHandle component.

<script setup lang="ts">
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable'
</script>

<template>
  <ResizablePanelGroup direction="horizontal">
    <ResizablePanel>One</ResizablePanel>
    <ResizableHandle with-handle />
    <ResizablePanel>Two</ResizablePanel>
  </ResizablePanelGroup>
</template>