Laravel Blade Components

Blade components are reusable UI pieces. They can be anonymous (view-only) or class-based (with backing PHP logic).

1 - Anonymous Component

{{-- resources/views/components/button.blade.php --}}
@props(['type' => 'button', 'color' => 'blue'])

<button type="{{ $type }}" class="btn btn-{{ $color }}">
    {{ $slot }}
</button>

{{-- Usage --}}
<x-button color="green">Save</x-button>
<x-button type="submit" color="red">Delete</x-button>

2 - Class-Based Component

php artisan make:component UserCard

// app/View/Components/UserCard.php
class UserCard extends Component
{
    public function __construct(public User $user) {}

    public function render(): View
    {
        return view('components.user-card');
    }
}

{{-- resources/views/components/user-card.blade.php --}}
<div class="card">
    <h3>{{ $user->name }}</h3>
    <p>{{ $user->email }}</p>
</div>

{{-- Usage --}}
<x-user-card :user="$user" />

3 - Named Slots

{{-- components/modal.blade.php --}}
<div class="modal">
    <div class="modal-header">{{ $header }}</div>
    <div class="modal-body">{{ $slot }}</div>
    <div class="modal-footer">{{ $footer }}</div>
</div>

{{-- Usage --}}
<x-modal>
    <x-slot:header>Confirm Delete</x-slot:header>
    Are you sure you want to delete this item?
    <x-slot:footer>
        <x-button color="red">Delete</x-button>
    </x-slot:footer>
</x-modal>