Laravel Blade Component Patterns

Blade Component Patterns

Class-Based Components

php artisan make:component Alert

type) {
            'success' => 'bg-green-100 text-green-800 border-green-300',
            'error' => 'bg-red-100 text-red-800 border-red-300',
            'warning' => 'bg-yellow-100 text-yellow-800 border-yellow-300',
            default => 'bg-blue-100 text-blue-800 border-blue-300',
        };
    }

    public function render(): View
    {
        return view('components.alert');
    }
}

{{-- resources/views/components/alert.blade.php --}}
merge(['class' => 'border rounded-lg p-4 ' . $alertClasses()]) }}
     role="alert">
    {{ $message ?: $slot }}
    @if ($dismissible)
        
            ×
        
    @endif

{{-- Usage --}}

Something went wrong.

Anonymous Components

{{-- resources/views/components/card.blade.php --}}
@props([
    'title' => null,
    'footer' => null,
])

merge(['class' => 'bg-white rounded-lg shadow-md overflow-hidden']) }}>
    @if ($title)
        
            {{ $title }}
        
    @endif

    
        {{ $slot }}
    

    @if ($footer)
        
            {{ $footer }}
        
    @endif

{{-- Usage --}}

    Name: {{ $user->name }}
    
        Edit
    

The $attributes Bag

Merging Attributes

{{-- ✅ Merge classes and other attributes --}}
merge(['class' => 'base-class', 'role' => 'alert']) }}>
    {{ $slot }}

{{-- Usage: classes are appended, other attrs are overridden --}}

{{-- Result: class="base-class extra-class" role="alert" id="my-alert" --}}

Class Manipulation

@props(['variant' => 'primary'])

class([
    'px-4 py-2 rounded font-medium',
    'bg-blue-600 text-white hover:bg-blue-700' => $variant === 'primary',
    'bg-gray-200 text-gray-800 hover:bg-gray-300' => $variant === 'secondary',
    'bg-red-600 text-white hover:bg-red-700' => $variant === 'danger',
])->merge(['type' => 'button']) }}>
    {{ $slot }}

Filtering and Checking Attributes

{{-- Filter attributes --}}
whereStartsWith('wire:') }} />
whereDoesntStartWith('wire:') }}>

{{-- Check if attribute exists --}}
@if ($attributes->has('autofocus'))
    document.querySelector('[autofocus]').focus();
@endif

{{-- Get a specific attribute --}}
get('type', 'text') }}" />

{{-- Only / Except --}}
only(['for', 'class']) }}>
except(['class']) }} />

Prepending and Appending

{{-- Prepend to existing attribute values --}}
prepend('class', 'base-') }}>

{{-- Useful for conditional attribute defaults --}}
merge([
    'type' => 'text',
    'class' => 'form-input',
]) }} />

Named Slots

{{-- resources/views/components/modal.blade.php --}}
@props(['title'])

merge(['class' => 'modal']) }}>
    
        {{ $title }}
        {{ $headerActions ?? '' }}
    

    
        {{ $slot }}
    

    @if (isset($footer))
        
            {{ $footer }}
        
    @endif

{{-- Usage --}}

    
        ×
    

    Are you sure you want to delete this item?

    
        Cancel
        Delete
    

Slot Attributes

{{-- Component definition --}}

    @foreach ($items as $item)
        {{ $slot->withAttributes(['class' => 'text-sm']) }}
    @endforeach

{{-- Scoped slots --}}
@props(['items'])

@foreach ($items as $item)
    {{ $slot }}
@endforeach

Dynamic Components

{{-- ✅ Render components dynamically --}}

{{-- Useful for form field rendering --}}
@foreach ($fields as $field)
    type"
        :name="$field->name"
        :label="$field->label"
        :value="old($field->name)"
    />
@endforeach

Layouts with Component Approach

{{-- resources/views/components/layouts/app.blade.php --}}
@props(['title' => config('app.name')])

getLocale()) }}">

    
    
    {{ $title }}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('styles')

    {{ $header ?? '' }}

    
        {{ $slot }}
    

    {{ $footer ?? '' }}

    @stack('scripts')

{{-- resources/views/dashboard.blade.php --}}

    
        
    

    Dashboard
    Welcome back!

Conditional Classes and Styles

{{-- @class directive --}}
 $status === 'active',
    'bg-red-100 text-red-800' => $status === 'inactive',
    'opacity-50' => $disabled,
])>
    {{ $label }}

{{-- @style directive --}}
 $isImportant,
    'display: none' => $hidden,
])>
    {{ $content }}

Stacks

{{-- In layout --}}

    @stack('styles')

    {{ $slot }}
    @stack('scripts')

{{-- In child views / components --}}
@push('styles')
    
@endpush

@push('scripts')
    
@endpush

{{-- Prepend to stack (added before other pushes) --}}
@prepend('scripts')
    
@endprepend

{{-- Push once (prevents duplicates) --}}
@pushOnce('scripts')
    
@endPushOnce

View Fragments for HTMX / Turbo

{{-- resources/views/posts/index.blade.php --}}

    Posts

    @fragment('post-list')
    
        @foreach ($posts as $post)
            @fragment('post-' . $post->id)
            id }}">
                {{ $post->title }}
                {{ $post->excerpt }}
            
            @endfragment
        @endforeach

        {{ $posts->links() }}
    
    @endfragment

// Controller returning just a fragment
public function index(Request $request)
{
    $posts = Post::paginate(15);

    if ($request->header('HX-Request')) {
        return view('posts.index', compact('posts'))->fragment('post-list');
    }

    return view('posts.index', compact('posts'));
}

Reusable Form Component Patterns

Text Input

{{-- resources/views/components/forms/input.blade.php --}}
@props([
    'name',
    'label' => null,
    'type' => 'text',
    'value' => null,
])

    @if ($label)
        
            {{ $label }}
        
    @endif

    class([
            'w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500',
            'border-red-500' => $errors->has($name),
        ])->merge([
            'type' => $type,
            'name' => $name,
            'id' => $name,
            'value' => old($name, $value),
        ]) }}
    />

    @error($name)
        {{ $message }}
    @enderror

Select

{{-- resources/views/components/forms/select.blade.php --}}
@props([
    'name',
    'label' => null,
    'options' => [],
    'selected' => null,
    'placeholder' => 'Select an option...',
])

    @if ($label)
        
            {{ $label }}
        
    @endif

    class([
            'w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500',
            'border-red-500' => $errors->has($name),
        ])->merge(['name' => $name, 'id' => $name]) }}
    >
        @if ($placeholder)
            {{ $placeholder }}
        @endif
        @foreach ($options as $value => $text)
            
                {{ $text }}
            
        @endforeach
    

    @error($name)
        {{ $message }}
    @enderror

Form Usage

    @csrf

    
    
     'Admin', 'editor' => 'Editor', 'viewer' => 'Viewer']"
    />

    Create User

Subdirectory Components

{{-- resources/views/components/forms/input.blade.php --}}
{{-- Usage: --}}

{{-- resources/views/components/navigation/menu-item.blade.php --}}
{{-- Usage: --}}
About

Inline Components

// For very simple components without a template
use Illuminate\View\Component;

class ColorPicker extends Component
{
    public function __construct(
        public string $color = '#000000',
    ) {}

    public function render(): string
    {
        return 
                merge(['value' => $color]) }}>
            
        blade;
    }
}

Checklist

• [ ] Components have a single, clear purpose
• [ ] @props declared for all expected data in anonymous components
• [ ] $attributes bag used to allow consumer customization
• [ ] Default classes set via merge() or class()
• [ ] Named slots used for flexible content sections
• [ ] Form components display validation errors via @error
• [ ] Layouts use @stack for page-specific CSS/JS
• [ ] @pushOnce used to prevent duplicate asset includes
• [ ] Dynamic components used for configurable rendering
• [ ] Components organized in subdirectories by domain
• [ ] @class and @style used for conditional styling
• [ ] Fragments used for partial page updates (HTMX/Turbo)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: iSerter
• Source: iSerter/laravel-claude-agents
• License: MIT

Install and usage instructions live in the source repository linked above.