laravel:blade-components-and-layouts

Compose UIs with Blade components, slots, and layouts; keep templates pure and testable

jpcaparas/superpowers-laravel169 installsMITSynced Aug 26

Works with

Claude CodeCursorCodex CLIGitHub CopilotGemini CLI
---
name: laravel:blade-components-and-layouts
description: Compose UIs with Blade components, slots, and layouts; keep templates pure and testable
license: MIT
---

# Blade Components and Layouts

Encapsulate markup and behavior with components; prefer slots over includes.

## Commands

```
sail artisan make:component Alert              # or: php artisan make:component Alert

// Use component
<x-alert type="warning" :message="$msg" class="mb-4" />

// Layouts + stacks
@extends('layouts.app')
@push('scripts')
    <script>/* page script */</script>
@endpush
```

## Patterns

- Keep components dumb: pass data in, emit markup out
- Use `merge()` to honor passed classes/attributes in components
- Prefer named slots for readability
- Extract small, reusable atoms rather than giant organisms
- Laravel 13+: use the `@fonts` directive (with the Vite font plugin) in layout `<head>` to emit preload links and `@font-face` rules automatically; `@fonts(["sans", "mono"])` for a subset

More Backend Frameworks skills

← All Backend Frameworks skills

Check your AI visibility

One URL in, a 0–100 score and the exact fixes out.

RUN THE CHECK

Browse all the tools

15 tools across six categories
13 of them never send your data anywhere

Free · No signup · No trial clock

SEE THE DIRECTORY