Skip to content

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.

Basic Usage

Before

Old content here.

After

New content here.

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

Props

Prop Type Default Description
layout string 'side-by-side' Layout mode: side-by-side or stacked.

Slots

Slot Description
before The "before" content panel, labeled automatically.
after The "after" content panel, labeled automatically.

Variants / Examples

Side-by-Side (Default)

Before

Version 1.0

Basic authentication with session-only support. No API tokens.

After

Version 2.0

Full authentication with session, API tokens, and OAuth2 support.

<x-aura::diff layout="side-by-side">
    <x-slot:before>
        <div class="p-4 bg-aura-surface-50 rounded-lg">
            <h4 class="font-semibold mb-2">Version 1.0</h4>
            <p class="text-sm">Basic authentication with session-only support.</p>
        </div>
    </x-slot:before>
    <x-slot:after>
        <div class="p-4 bg-aura-surface-50 rounded-lg">
            <h4 class="font-semibold mb-2">Version 2.0</h4>
            <p class="text-sm">Full authentication with session, API tokens, and OAuth2.</p>
        </div>
    </x-slot:after>
</x-aura::diff>

Stacked Layout

Before
<div class="container">
    <h1>Hello World</h1>
</div>
After
<main class="container mx-auto">
    <h1 class="text-2xl font-bold">Hello World</h1>
    <p>Welcome to the new version.</p>
</main>
<x-aura::diff layout="stacked">
    <x-slot:before>
        <div class="p-4 bg-red-50 rounded-lg">
            <pre><code>{{ $oldCode }}</code></pre>
        </div>
    </x-slot:before>
    <x-slot:after>
        <div class="p-4 bg-green-50 rounded-lg">
            <pre><code>{{ $newCode }}</code></pre>
        </div>
    </x-slot:after>
</x-aura::diff>

Accessibility

  • Each panel includes a heading label ("Before" / "After") for screen readers.
  • The layout is responsive: side-by-side stacks vertically on small screens.
  • Color is supplemented by labels, so content is not distinguished by color alone.