Resizable — Vanilla

Resizable panel groups with vanilla HTML. Drag handle via JS.

Resizable

Use resizable__pane-group with resizable__pane-group--horizontal or resizable__pane-group--vertical. Children: resizable__pane (with data-resizable-pane and initial flex: 1 1 X%), resizable__handle (with data-resizable-handle). Wire mousedown/mousemove/mouseup on handle to resize.

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.

npm pnpm yarn bun
Live example (structure; drag in Astro/Svelte)
One
Two

HTML

html html 
<!-- Resizable: pane group + panes + handle; drag to resize via JS -->
<div class="resizable__pane-group resizable__pane-group--horizontal" data-resizable-group data-direction="horizontal" style="max-width: 28rem; min-height: 200px; border: 1px solid var(--border); border-radius: var(--radius-lg);">
  <div class="resizable__pane" data-resizable-pane style="flex: 1 1 50%;">Pane 1</div>
  <div class="resizable__handle" data-resizable-handle></div>
  <div class="resizable__pane" data-resizable-pane style="flex: 1 1 50%;">Pane 2</div>
</div>

Other frameworks: Astro · Svelte · Vue · React