Blade Components

Using Components

Blade components let you build reusable UI elements. Instead of repeating HTML across views, you create a component once and use it everywhere.

To use a component, simply use the <x-> syntax:

<x-alert />
<x-button color="blue">Submit</x-button>
    

Components live in resources/views/components and are referenced by their filename.

Slots for Content

Components can accept content through slots. The default slot receives whatever you put between the component tags:

<!-- Usage -->
<x-card>
    <p>This goes into the default slot.</p>
</x-card>

<!-- Component file -->
<div class="card">
    {{ $slot }}
</div>
    

You can also use named slots with @slot:

<x-card>
    @slot('title')
        Card Title
    @endslot
    <p>Card body content.</p>
</x-card>
    

Defining Props with @props

Components can receive data through attributes. Use @props at the top of your component file to declare what it accepts:

@props(['title', 'color' => 'gray'])

<div class="badge badge-{{ $color }}">
    {{ $title }}
</div>
    

Now you can pass those props when using the component:

<x-badge title="New" color="green" />
    

Inline Components

You don't always need a separate file. Inline components are defined directly in your routes or controllers using the Blade::component method. But for most cases, file-based components are cleaner and more maintainable.

Component Classes

For complex components, you can create a PHP class alongside the blade file. If your component is components/alert.blade.php, create components/Alert.php:

class Alert extends Component
{
    public $type;
    public $message;

    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }
}
    

The class handles the logic, and the blade file handles the presentation. Clean separation of concerns.