Laravel Swap Component

Free · MIT

A toggle component that swaps between two visual states with optional rotation or flip animations.

A Swap 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::swap>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::swap>
    <x-slot:on>
        <x-aura::icon name="sun" class="w-6 h-6" />
    </x-slot:on>
    <x-slot:off>
        <x-aura::icon name="moon" class="w-6 h-6" />
    </x-slot:off>
</x-aura::swap>

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

Overview

The <x-aura::swap> component toggles between two content states using named on and off slots. It supports optional rotation and flip transition effects. Use it for theme toggles, icon switches, like/unlike buttons, or any two-state visual swap.

Props

Prop	Type	Default	Description
`active`	`bool`	`false`	Initial toggle state. `true` shows the `on` slot, `false` shows the `off` slot.
`rotate`	`bool`	`false`	Apply a rotation transition when toggling.
`flip`	`bool`	`false`	Apply a flip transition when toggling.