Laravel Resizable Component

Pro

Drag-resizable split panels for building adjustable layouts.

A Resizable built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::resizable>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Resizable is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<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>

See the full API, props and live examples in the Resizable documentation.

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).