# Laravel Blade Component Patterns

> Best practices for Laravel Blade components including class-based and anonymous components, slots, attribute bags, and reusable UI patterns.

- **Type:** Skill
- **Install:** `agentstack add skill-iserter-laravel-claude-agents-laravel-blade-component-patterns`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [iSerter](https://agentstack.voostack.com/s/iserter)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [iSerter](https://github.com/iSerter)
- **Source:** https://github.com/iSerter/laravel-claude-agents/tree/main/skills/laravel-blade-component-patterns

## Install

```sh
agentstack add skill-iserter-laravel-claude-agents-laravel-blade-component-patterns
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Blade Component Patterns

## Class-Based Components

```bash
php artisan make:component Alert
```

```php
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');
    }
}
```

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

```

```blade
{{-- Usage --}}

Something went wrong.
```

## Anonymous Components

```blade
{{-- 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

```

```blade
{{-- Usage --}}

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

```

## The $attributes Bag

### Merging Attributes

```blade
{{-- ✅ 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

```blade
@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

```blade
{{-- 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

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

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

## Named Slots

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

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

    
        {{ $slot }}
    

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

```

```blade
{{-- Usage --}}

    
        ×
    

    Are you sure you want to delete this item?

    
        Cancel
        Delete
    

```

### Slot Attributes

```blade
{{-- Component definition --}}

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

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

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

## Dynamic Components

```blade
{{-- ✅ 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

```blade
{{-- 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')

```

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

    
        
    

    Dashboard
    Welcome back!

```

## Conditional Classes and Styles

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

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

```

## Stacks

```blade
{{-- 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

```blade
{{-- 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

```

```php
// 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

```blade
{{-- 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

```blade
{{-- 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

```blade

    @csrf

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

    Create User

```

## Subdirectory Components

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

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

## Inline Components

```php
// 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](https://github.com/iSerter)
- **Source:** [iSerter/laravel-claude-agents](https://github.com/iSerter/laravel-claude-agents)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-iserter-laravel-claude-agents-laravel-blade-component-patterns
- Seller: https://agentstack.voostack.com/s/iserter
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.