laravel blade components views

Laravel Blade components for reusable UI

Carlos Mendez Jan 2026

4 tabs

@props(['type' => 'info', 'dismissible' => false])

@php
$classes = [
    'info' => 'bg-blue-100 border-blue-500 text-blue-700',
    'success' => 'bg-green-100 border-green-500 text-green-700',
    'warning' => 'bg-yellow-100 border-yellow-500 text-yellow-700',
    'error' => 'bg-red-100 border-red-500 text-red-700',
][$type];
@endphp

<div {{ $attributes->merge(['class' => "border-l-4 p-4 {$classes}"]) }} role="alert">
    <div class="flex items-center justify-between">
        <div class="flex-1">
            @if (isset($title))
                <p class="font-bold">{{ $title }}</p>
            @endif
            <div>{{ $slot }}</div>
        </div>

        @if ($dismissible)
            <button type="button" class="ml-4" onclick="this.parentElement.parentElement.remove()">
                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
                </svg>
            </button>
        @endif
    </div>
</div>

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Card extends Component
{
    public function __construct(
        public string $title,
        public ?string $footer = null,
        public bool $elevated = false,
    ) {}

    public function render()
    {
        return view('components.card');
    }

    public function cardClasses(): string
    {
        return $this->elevated
            ? 'shadow-lg'
            : 'shadow';
    }
}

<div {{ $attributes->merge(['class' => "bg-white rounded-lg {$cardClasses()}"]) }}>
    <div class="px-6 py-4 border-b">
        <h3 class="text-lg font-semibold">{{ $title }}</h3>
        @isset($subtitle)
            <p class="text-sm text-gray-600">{{ $subtitle }}</p>
        @endisset
    </div>

    <div class="p-6">
        {{ $slot }}
    </div>

    @if ($footer)
        <div class="px-6 py-4 bg-gray-50 border-t rounded-b-lg">
            {{ $footer }}
        </div>
    @endif
</div>

{{-- Anonymous component --}}
<x-alert type="success" dismissible>
    <x-slot name="title">Success!</x-slot>
    Your post was published successfully.
</x-alert>

{{-- Class-based component --}}
<x-card title="Recent Posts" elevated class="mb-4">
    <x-slot name="subtitle">Latest blog posts</x-slot>

    @foreach ($posts as $post)
        <article>{{ $post->title }}</article>
    @endforeach

    <x-slot name="footer">
        <a href="{{ route('posts.index') }}">View all posts</a>
    </x-slot>
</x-card>

4 files · blade, php Explain with highlit

Blade components create reusable, self-contained UI elements with their own logic and styling. Anonymous components are simple Blade files, while class-based components have PHP backing classes. I pass data via attributes—<x-alert type='success' />. Component classes accept constructor arguments for dependency injection. Slots enable flexible content insertion, with named slots for multiple content areas. The @props directive defines component properties with defaults. Components can render conditionally or loop over data. I use @aware to access parent component data. Attributes merge automatically with $attributes, preserving classes and other HTML attributes. Components promote consistency and reduce duplication across views.