Laravel Diff Component

Free · MIT

A before/after comparison component with side-by-side and stacked layout options.

A Diff 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::diff>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::diff>
    <x-slot:before>
        <div class="p-4 bg-red-50 rounded-lg">
            <p>Old content here.</p>
        </div>
    </x-slot:before>
    <x-slot:after>
        <div class="p-4 bg-green-50 rounded-lg">
            <p>New content here.</p>
        </div>
    </x-slot:after>
</x-aura::diff>

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

Overview

The <x-aura::diff> component provides a visual comparison between two content states using named before and after slots. It supports a side-by-side layout for horizontal comparison and a stacked layout for vertical comparison. Useful for showing text changes, image comparisons, or any before/after content.