Resizable — ARC UI

Components

Resizable

layout

interactive

<arc-resizable>

Overview

Guidelines

When to use

Use Resizable for sidebars, property panels, and console drawers that users should resize
Set min-size to prevent the panel from collapsing below a usable minimum (e.g. 150px for a sidebar)
Set max-size to prevent the panel from consuming the entire viewport
Listen for the arc-resize event to persist the user preference to localStorage or a database
Pair with SplitPane when you need two resizable regions that share a single divider

When not to use

Use Resizable for content that should never be resized -- use a fixed-width Container instead
Set min-size and max-size to the same value -- this effectively disables resizing
Forget to give the parent a defined height when using direction="vertical"
Place the Resizable handle adjacent to a scrollbar; users may confuse the two controls
Override the handle styles without preserving the expanded hit area pseudo-element

Features

Horizontal and vertical resize directions via the direction prop
Pointer Events API with pointer capture for mouse, touch, and pen support
Configurable min-size and max-size constraints to prevent over-shrinking or over-expanding
Real-time --panel-size CSS custom property updates for flicker-free resizing
arc-resize custom event dispatched on every size change
Keyboard-accessible handle with Arrow key steps (5px default, 20px with Shift)
ARIA separator role with aria-valuenow, aria-valuemin, and aria-valuemax
Expanded invisible hit area for easier grab targeting on the 4px handle

Preview

Sidebar

Drag the right edge to resize this panel.

Main content area

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-resizable direction="horizontal" size="200">
  <div>Resizable panel</div>
</arc-resizable>

import { Resizable } from '@arclux/arc-ui-react';

<Resizable direction="horizontal" size="200">
  <div>Resizable panel</div>
</Resizable>

<script setup>
import { Resizable } from '@arclux/arc-ui-vue';
</script>

<template>
  <Resizable direction="horizontal" size="200">
    <div>Resizable panel</div>
  </Resizable>
</template>

<script>
  import { Resizable } from '@arclux/arc-ui-svelte';
</script>

<Resizable direction="horizontal" size="200">
  <div>Resizable panel</div>
</Resizable>

import { Component } from '@angular/core';
import { Resizable } from '@arclux/arc-ui-angular';

@Component({
  imports: [Resizable],
  template: `
    <Resizable direction="horizontal" size="200">
      <div>Resizable panel</div>
    </Resizable>
  `,
})
export class MyComponent {}

import { Resizable } from '@arclux/arc-ui-solid';

<Resizable direction="horizontal" size="200">
  <div>Resizable panel</div>
</Resizable>

import { Resizable } from '@arclux/arc-ui-preact';

<Resizable direction="horizontal" size="200">
  <div>Resizable panel</div>
</Resizable>

API

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Controls which edge the drag handle appears on. Horizontal places the handle on the right edge and resizes width; vertical places it on the bottom edge and resizes height.
`size`	`number`	`300`	Current size of the panel in pixels. Updated in real time during drag. Maps to the --panel-size CSS custom property.
`min-size`	`number`	`100`	Minimum allowed size in pixels. The panel cannot be dragged smaller than this value.
`max-size`	`number`	`Infinity`	Maximum allowed size in pixels. The panel cannot be dragged larger than this value. Defaults to no limit.

Events

Event	Description
`arc-resize`	Fired during and after panel resize with { size } detail