ResizableScreen

A split-pane layout component that allows users to resize two panels by dragging a handle, with keyboard accessibility support.

Import#

import { ResizableScreen } from "asheeui";

Usage#

import { ResizableScreen } from "asheeui";

export default function Basic() {
	return (
		<div className="w-full h-100">
			<ResizableScreen>
				<div className="flex h-40 items-center justify-center p-4">
					Left Panel
				</div>
				<div className="flex h-40 items-center justify-center p-4">
					Right Panel
				</div>
			</ResizableScreen>
		</div>
	);
}

Examples#

Basic horizontal split#

Vertical split#

Controlled size#

With default size#

Min and max size#

Handle styling#

Hide handle#

Custom step size#

Custom handle className#

With code editor layout#

// Editor Panel

const hello = "world";

Nested resizable screens#

Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

ResizableScreen reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <ResizableScreen />
2. Component config: components.resizableScreen in your ashee.config
3. Theme default: defaultVariant / defaultColor / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    resizableScreen: {
      defaultSize: 50,
      minSize: 20,
      maxSize: 80,
      step: 2,
      orientation: "horizontal",
      handleVariant: "bordered",
      handleColor: "primary",
      handleRadius: "full",
      hideHandle: false,
    },
  },
};

Built-in fallbacks#

{
  defaultSize: 50,
  minSize: 20,
  maxSize: 80,
  step: 2,
  orientation: "horizontal",
  handleVariant: "bordered",
  handleColor: "primary",
  handleRadius: "full",
  hideHandle: false,
  className: "",
  handleClassName: "",
}

Accessibility#

• Uses role="separator" for the resize handle
• Supports keyboard navigation with arrow keys (Left/Right for horizontal, Up/Down for vertical)
• Supports Home (min) and End (max) keys
• Includes aria-valuenow, aria-valuemin, and aria-valuemax attributes
• Uses aria-orientation to indicate resize direction
• Implements focus-visible rings for keyboard navigation
• Pointer capture ensures smooth drag experience

Notes#

• Children Requirement: The component expects exactly two children. Any additional children will be ignored.
• Controlled vs Uncontrolled: Use size/onSizeChange for controlled usage, or defaultSize for uncontrolled.
• left Prop: The left prop is provided as an alias for defaultSize for backward compatibility.
• Handle Visibility: When hideHandle is true, the visual handle is hidden but the resize functionality is still available via keyboard shortcuts.
• Drag Performance: The component uses pointer events with pointer capture for smooth dragging performance.