Categories

Laravel Anonymous Blade Components Explained: Slots, Props, and Practical Use Cases

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

Introduction: Why Anonymous Components?

When you start working with Laravel, one of the first things you notice is how easy it is to structure views with the Blade templating engine. But as your application grows, repeating the same HTML across multiple files quickly becomes messy and hard to maintain. This is where Anonymous Blade Components shine.

Anonymous Components allow you to package chunks of reusable markup in a single Blade file without writing any additional PHP class. They’re lightweight, flexible, and perfect for everyday UI patterns like cards, alerts, buttons, and layouts. With Laravel Jetstream, these components gained even more popularity because they keep your views consistent while enforcing the DRY principle (Don’t Repeat Yourself).

What Are Anonymous Blade Components?

Anonymous Blade Components are self-contained templates stored in the resources/views/components directory. Once created, you can include them anywhere in your Blade views using the special <x-component-name> syntax.

Unlike class-based components, anonymous components don’t require a PHP class. This makes them simple, lightweight, and ideal for reusable presentation logic that doesn’t need backend processing.

Creating Your First Anonymous Component

To create an anonymous component, add a new Blade file inside the resources/views/components directory. Let’s build a simple card component:

<!-- resources/views/components/card.blade.php -->
<div class="card">
  <div class="card-body">
    This is a reusable card component.
  </div>
</div>

You can now use this component anywhere in your Blade templates like this:

<x-card></x-card>

Making Components Dynamic with Slots

A static card is helpful, but real-world applications need flexibility. That’s where slots come in. A slot is essentially a placeholder inside a component that gets replaced by the content you provide when using the component.

The Default Slot

Update your card.blade.php like this:

<div class="card">
  <div class="card-body">
    {{ $slot }}
  </div>
</div>

Now, whatever you put between the <x-card> tags gets injected into the $slot variable:

<x-card>
  This text will appear inside the card body.
</x-card>

Output:

<div class="card">
  <div class="card-body">
    This text will appear inside the card body.
  </div>
</div>

Named Slots

What if you need multiple placeholders, like a header and a body? That’s where named slots come in. Modify your component like this:

<div class="card">
  <div class="card-header">
    {{ $title }}
  </div>
  <div class="card-body">
    {{ $slot }}
  </div>
</div>

And then call the component like this:

<x-card>
  <x-slot name="title">User Profile</x-slot>
  This is the card content.
</x-card>

Adding Attributes to Components

Anonymous Components can also accept attributes such as class, id, or data-* tags. This makes them highly customizable without editing the component file each time.

Usage:

<x-card class="w-50" id="main-card">
  <x-slot name="title">Dashboard</x-slot>
  This card takes half the page width.
</x-card>

Modify your component to handle merging attributes:

<div {{ $attributes->merge(['class' => 'card']) }}>
  <div class="card-header">
    {{ $title }}
  </div>
  <div class="card-body">
    {{ $slot }}
  </div>
</div>

Now Laravel will merge your custom classes with the default card class instead of replacing it.

Using Props for Better Configuration

Sometimes, you want to pass specific values as configuration rather than as HTML attributes. That’s where props come in. Props are declared at the top of the component using @props.

Example:

@props(['footer' => 'Default footer text'])

<div {{ $attributes->merge(['class' => 'card']) }}>
  <div class="card-header">
    {{ $title }}
  </div>
  <div class="card-body">
    {{ $slot }}
  </div>
  <div class="card-footer text-muted">
    {{ $footer }}
  </div>
</div>

Now you can pass a footer as a prop:

<x-card footer="Custom Footer">
  <x-slot name="title">Card with Footer</x-slot>
  The body of the card goes here.
</x-card>

If the footer text comes from a PHP variable, prefix it with a colon:

<x-card :footer="$dynamicFooter">
  <x-slot name="title">Dynamic Footer Example</x-slot>
  This body content is static, but the footer is dynamic.
</x-card>

Real-World Use Cases for Anonymous Components

Anonymous Components are ideal for any UI pattern you repeat across multiple pages. Here are some examples:

• Cards – Profile cards, product cards, dashboard cards.
• Alerts – Success, error, or warning messages with custom colors.
• Forms – Consistent form group structures for labels and inputs.
• Navigation Elements – Reusable menus or breadcrumbs.

Comparison: Anonymous Components vs Alternatives

Why should you use Anonymous Components instead of partials or repeating HTML? Let’s compare:

Common Pitfalls When Using Anonymous Components

• Incorrect slot names – Ensure the name in x-slot matches the variable name inside the component.
• Attribute conflicts – Always use $attributes->merge() to avoid overwriting classes.
• Forgetting default values – Use @props to define defaults and avoid errors when props are missing.
• Blade cache issues – Run php artisan view:clear if your updates don’t appear immediately.

Best Practices for Anonymous Blade Components

• Keep components small and focused — don’t try to handle too many variations in one file.
• Use slots for flexible content, props for configuration, and attributes for customization.
• Reuse components for common UI elements like cards, alerts, and buttons to ensure consistency.
• Check out Laravel Jetstream for excellent real-world examples of how components are structured.

Conclusion

Anonymous Blade Components are one of the simplest yet most powerful features in Laravel. They help you create reusable, customizable, and maintainable UI elements without adding extra PHP classes. By combining slots, props, and attributes, you can build dynamic layouts that are easy to maintain and scale.

If you’re new to components, start by creating a simple card or alert. As your project grows, you’ll quickly see how these small building blocks reduce duplicated code and make your frontend far more organized.