Skip to content

Pro Component — This component requires an Aura UI Pro license.

Basic Usage

Left Panel

Right Panel

<x-aura::resizable direction="horizontal" :defaultSize="50">
    <x-slot:first>
        <div class="p-4 bg-gray-50 rounded-lg h-48 flex items-center justify-center">
            <p class="text-gray-600 font-medium">Left Panel</p>
        </div>
    </x-slot:first>
    <x-slot:second>
        <div class="p-4 bg-gray-50 rounded-lg h-48 flex items-center justify-center">
            <p class="text-gray-600 font-medium">Right Panel</p>
        </div>
    </x-slot:second>
</x-aura::resizable>

Props

Prop Type Default Description
direction string 'horizontal' Split direction: horizontal (left/right) or vertical (top/bottom).
minSize int 10 Minimum size of the first panel as a percentage (0-100).
maxSize int 90 Maximum size of the first panel as a percentage (0-100).
defaultSize int 50 Initial size of the first panel as a percentage (0-100).

Slots

Slot Description
first Content for the first panel (left or top).
second Content for the second panel (right or bottom).

Examples

Horizontal Split (Code Editor Layout)

<div class="container">

<h1>Hello World</h1>

</div>

Hello World

<x-aura::resizable direction="horizontal" :defaultSize="40" :minSize="20" :maxSize="80">
    <x-slot:first>
        <div class="p-4 bg-gray-900 rounded-l-lg h-64 font-mono text-sm text-green-400">
            <p>&lt;div class="container"&gt;</p>
            <p class="ml-4">&lt;h1&gt;Hello World&lt;/h1&gt;</p>
            <p>&lt;/div&gt;</p>
        </div>
    </x-slot:first>
    <x-slot:second>
        <div class="p-4 bg-white rounded-r-lg h-64 border border-gray-200">
            <h1 class="text-2xl font-bold">Hello World</h1>
        </div>
    </x-slot:second>
</x-aura::resizable>

Vertical Split

Top Panel (60%)

Bottom Panel (40%)

<x-aura::resizable direction="vertical" :defaultSize="60" :minSize="30" :maxSize="70">
    <x-slot:first>
        <div class="p-4 bg-violet-50 rounded-t-lg h-full flex items-center justify-center">
            <p class="text-violet-700 font-medium">Top Panel (60%)</p>
        </div>
    </x-slot:first>
    <x-slot:second>
        <div class="p-4 bg-indigo-50 rounded-b-lg h-full flex items-center justify-center">
            <p class="text-indigo-700 font-medium">Bottom Panel (40%)</p>
        </div>
    </x-slot:second>
</x-aura::resizable>

Accessibility

  • The resize handle uses role="separator" with aria-orientation set to horizontal or vertical.
  • The handle includes aria-valuenow, aria-valuemin, and aria-valuemax reflecting the current split percentage.
  • Keyboard navigation: Arrow Left/Right (horizontal) or Arrow Up/Down (vertical) to resize in 1% increments, Home/End to jump to min/max.
  • The handle is focusable and displays a visible focus ring for keyboard users.
  • aria-label="Resize panels" provides context for screen readers.