Stepper

<x-aura::stepper :active="$currentStep">
    <x-aura::stepper.step :step="1" title="Account Setup" description="Enter email" :status="$currentStep > 1 ? 'completed' : ($currentStep === 1 ? 'active' : 'pending')" />
    <x-aura::stepper.step :step="2" title="Workspace" description="Configure team" :status="$currentStep > 2 ? 'completed' : ($currentStep === 2 ? 'active' : 'pending')" />
    <x-aura::stepper.step :step="3" title="Collaborators" description="Invite members" :status="$currentStep > 3 ? 'completed' : ($currentStep === 3 ? 'active' : 'pending')" />
</x-aura::stepper>

<x-aura::flex align="center" justify="between" class="pt-4 border-t border-zinc-100 dark:border-zinc-800">
    <x-aura::button variant="secondary" size="sm" wire:click="previousStep" :disabled="$currentStep === 1">
        Previous
    </x-aura::button>

    <x-aura::button variant="primary" size="sm" wire:click="nextStep" :disabled="$currentStep === 3">
        Next
    </x-aura::button>
</x-aura::flex>

<x-aura::stepper :active="3">
    <x-aura::stepper.step :step="1" title="Cart" description="2 items" status="completed" />
    <x-aura::stepper.step :step="2" title="Shipping" description="Standard delivery" status="completed" />
    <x-aura::stepper.step :step="3" title="Payment" description="Credit card" status="active" />
    <x-aura::stepper.step :step="4" title="Confirm" description="Review order" status="pending" />
</x-aura::stepper>