Components in Laravel (Blade)

Components in Laravel (Blade) — a practical guide to Laravel Blade components with clear examples you can reuse in real projects.

Laravel Tutorial Series (6/27). Prefer one page? Read the complete Laravel tutorial (all 27 topics).

Short description

Blade components let you reuse UI pieces with props and slots instead of copying HTML everywhere.

Create a component

php artisan make:component Alert

Class

`app/View/Components/Alert.php`:

public function __construct(
    public string $type = 'info'
) {}

View

`resources/views/components/alert.blade.php`:

<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

Usage

<x-alert type="success">
    Profile updated successfully.
</x-alert>

Anonymous component (no class)

Create `resources/views/components/button.blade.php`:

<button {{ $attributes->merge(['class' => 'btn']) }}>
    {{ $slot }}
</button>

<x-button class="btn-primary" type="submit">Save</x-button>