Resizable
Resizable panel groups with drag handles (horizontal or vertical)
Same BEM classes and behavior as Astro, Svelte, and React.
Add this component
Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.
Choose your package manager — click a tab to select, then copy the command.
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import ResizablePaneGroup from '../components/astro/ResizablePaneGroup.astro';
import ResizablePane from '../components/astro/ResizablePane.astro';
import ResizableHandle from '../components/astro/ResizableHandle.astro';
---
<ResizablePaneGroup direction="horizontal">
<ResizablePane defaultSize={50}>Left</ResizablePane>
<ResizableHandle />
<ResizablePane>Right</ResizablePane>
</ResizablePaneGroup>
<!-- Rizzo CSS + resizable script. BEM: resizable-pane-group, resizable-pane, resizable-handle. -->
<div class="resizable-pane-group">
<div class="resizable-pane">Left</div>
<div class="resizable-handle" aria-hidden="true"></div>
<div class="resizable-pane">Right</div>
</div>
<script>
import { ResizablePaneGroup, ResizablePane, ResizableHandle } from '$lib/rizzo';
</script>
<ResizablePaneGroup direction="horizontal">
<ResizablePane defaultSize={50}>Left</ResizablePane>
<ResizableHandle />
<ResizablePane>Right</ResizablePane>
</ResizablePaneGroup>
<script setup>
import ResizablePaneGroup from '@/components/rizzo/ResizablePaneGroup.vue';
import ResizablePane from '@/components/rizzo/ResizablePane.vue';
import ResizableHandle from '@/components/rizzo/ResizableHandle.vue';
</script>
<template>
<ResizablePaneGroup direction="horizontal">
<ResizablePane :default-size="50">Left</ResizablePane>
<ResizableHandle />
<ResizablePane :default-size="50">Right</ResizablePane>
</ResizablePaneGroup>
</template>
import { ResizablePaneGroup, ResizablePane, ResizableHandle } from './components/react';
<ResizablePaneGroup direction="horizontal">
<ResizablePane defaultSize={50}>Left</ResizablePane>
<ResizableHandle />
<ResizablePane defaultSize={50}>Right</ResizablePane>
</ResizablePaneGroup>
Other frameworks: Astro · Vanilla · Svelte · React
npm 
pnpm 
yarn 
bun