Blade Components

Last modified on: September 4, 2025

<h1 data-start="133" data-end="167">🚀 Blade Components in Laravel</h1>
<p data-start="169" data-end="296">In Laravel, <strong data-start="181" data-end="201">Blade Components</strong> are reusable UI building blocks that make it easy to create <strong data-start="262" data-end="293">modular and clean templates</strong>.</p>
<p data-start="298" data-end="391">Think of them like <strong data-start="317" data-end="332">LEGO blocks</strong>: once created, you can reuse them across multiple pages.</p>
<p data-start="393" data-end="404">Examples:</p>
<ul data-start="405" data-end="469">
<li data-start="405" data-end="416">
<p data-start="407" data-end="416">Buttons</p>
</li>
<li data-start="417" data-end="427">
<p data-start="419" data-end="427">Alerts</p>
</li>
<li data-start="428" data-end="438">
<p data-start="430" data-end="438">Modals</p>
</li>
<li data-start="439" data-end="448">
<p data-start="441" data-end="448">Cards</p>
</li>
<li data-start="449" data-end="469">
<p data-start="451" data-end="469">Navigation Menus</p>
</li>
</ul>
<hr data-start="471" data-end="474" />
<h2 data-start="476" data-end="513">🔹 1. What is a Blade Component?</h2>
<p data-start="515" data-end="542">A <strong data-start="517" data-end="536">Blade Component</strong> is:</p>
<ul data-start="543" data-end="702">
<li data-start="543" data-end="583">
<p data-start="545" data-end="583">A reusable view file (<code data-start="567" data-end="579">.blade.php</code>).</p>
</li>
<li data-start="584" data-end="614">
<p data-start="586" data-end="614">Can accept <strong data-start="597" data-end="611">data/props</strong>.</p>
</li>
<li data-start="615" data-end="652">
<p data-start="617" data-end="652">Can have a <strong data-start="628" data-end="649">class-based logic</strong>.</p>
</li>
<li data-start="653" data-end="702">
<p data-start="655" data-end="702">Simplifies large UIs into <strong data-start="681" data-end="699">smaller chunks</strong>.</p>
</li>
</ul>
<hr data-start="704" data-end="707" />
<h2 data-start="709" data-end="740">🔹 2. Creating a Component</h2>
<p data-start="742" data-end="756">Use Artisan:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>php artisan make:component Alert</code></pre>
</div>
</div>
</div>
</div>
<p data-start="804" data-end="821">This generates:</p>
<ol data-start="822" data-end="941">
<li data-start="822" data-end="875">
<p data-start="825" data-end="875"><strong data-start="825" data-end="839">Class file</strong> &rarr; <code data-start="842" data-end="873">app/View/Components/Alert.php</code></p>
</li>
<li data-start="876" data-end="941">
<p data-start="879" data-end="941"><strong data-start="879" data-end="892">View file</strong> &rarr; <code data-start="895" data-end="939">resources/views/components/alert.blade.php</code></p>
</li>
</ol>
<hr data-start="943" data-end="946" />
<h2 data-start="948" data-end="989">🔹 3. Example: Basic Alert Component</h2>
<p data-start="991" data-end="1040">📂 <code data-start="994" data-end="1038">resources/views/components/alert.blade.php</code></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;div class="alert alert-{{ $type }}"&gt;
    {{ $slot }}
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1117" data-end="1138">📂 Using in a view:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;x-alert type="success"&gt;
    Profile updated successfully!
&lt;/x-alert&gt;

&lt;x-alert type="danger"&gt;
    Something went wrong!
&lt;/x-alert&gt;</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1286" data-end="1298">➡️ Output:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;div class="alert alert-success"&gt;Profile updated successfully!&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;Something went wrong!&lt;/div&gt;</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1441" data-end="1444" />
<h2 data-start="1446" data-end="1484">🔹 4. Passing Props to Components</h2>
<p data-start="1486" data-end="1522">Props are like attributes in HTML.</p>
<p data-start="1524" data-end="1558">📂 Component: <code data-start="1538" data-end="1556">button.blade.php</code></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;button class="btn btn-{{ $type }}"&gt;
    {{ $slot }}
&lt;/button&gt;</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1637" data-end="1648">📂 Usage:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;x-button type="primary"&gt;Save&lt;/x-button&gt;
&lt;x-button type="danger"&gt;Delete&lt;/x-button&gt;</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1747" data-end="1750" />
<h2 data-start="1752" data-end="1785">🔹 5. Class-Based Components</h2>
<p data-start="1787" data-end="1834">Sometimes, you need logic inside a component.</p>
<p data-start="1836" data-end="1872">📂 <code data-start="1839" data-end="1870">app/View/Components/Alert.php</code></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;

public function __construct($type = 'info')
    {
        $this-&gt;type = $type;
    }

public function render()
    {
        return view('components.alert');
    }
}</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2175" data-end="2203">📂 View <code data-start="2183" data-end="2200">alert.blade.php</code>:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;div class="alert alert-{{ $type }}"&gt;
    {{ $slot }}
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2280" data-end="2291">📂 Usage:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;x-alert type="warning"&gt;This is a warning message.&lt;/x-alert&gt;</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2368" data-end="2371" />
<h2 data-start="2373" data-end="2404">🔹 6. Anonymous Components</h2>
<p data-start="2406" data-end="2468">If you don&rsquo;t need a PHP class, use <strong data-start="2441" data-end="2465">anonymous components</strong>.</p>
<p data-start="2470" data-end="2518">📂 <code data-start="2473" data-end="2516">resources/views/components/card.blade.php</code></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;div class="card"&gt;
    &lt;div class="card-header"&gt;{{ $title }}&lt;/div&gt;
    &lt;div class="card-body"&gt;{{ $slot }}&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2653" data-end="2664">📂 Usage:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;x-card title="User Profile"&gt;
    &lt;p&gt;This is user profile content.&lt;/p&gt;
&lt;/x-card&gt;</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2761" data-end="2764" />
<h2 data-start="2766" data-end="2796">🔹 7. Slots in Components</h2>
<ul data-start="2798" data-end="2922">
<li data-start="2798" data-end="2872">
<p data-start="2800" data-end="2872"><strong data-start="2800" data-end="2816">Default slot</strong> &rarr; content between <code data-start="2835" data-end="2869">&lt;x-component&gt; ... &lt;/x-component&gt;</code>.</p>
</li>
<li data-start="2873" data-end="2922">
<p data-start="2875" data-end="2922"><strong data-start="2875" data-end="2890">Named slots</strong> &rarr; for multiple content areas.</p>
</li>
</ul>
<p data-start="2924" data-end="2946">📂 <code data-start="2927" data-end="2944">modal.blade.php</code></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;div class="modal"&gt;
    &lt;div class="modal-header"&gt;{{ $header }}&lt;/div&gt;
    &lt;div class="modal-body"&gt;{{ $slot }}&lt;/div&gt;
    &lt;div class="modal-footer"&gt;
        {{ $footer }}
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
</div>
<p data-start="3149" data-end="3160">📂 Usage:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;x-modal&gt;
    &lt;x-slot name="header"&gt;Delete Confirmation&lt;/x-slot&gt;
    &lt;p&gt;Are you sure you want to delete this item?&lt;/p&gt;
    &lt;x-slot name="footer"&gt;
        &lt;button&gt;Cancel&lt;/button&gt;
        &lt;button&gt;Delete&lt;/button&gt;
    &lt;/x-slot&gt;
&lt;/x-modal&gt;</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3411" data-end="3414" />
<h2 data-start="3416" data-end="3444">🔹 8. Component Aliases</h2>
<p data-start="3446" data-end="3517">You can register components with aliases inside <code data-start="3494" data-end="3514">AppServiceProvider</code>:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>use Illuminate\Support\Facades\Blade;

public function boot()
{
    Blade::component('alert-box', \App\View\Components\Alert::class);
}</code></pre>
</div>
</div>
</div>
</div>
<p data-start="3667" data-end="3685">Now you can use:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;x-alert-box type="success"&gt;Task Completed&lt;/x-alert-box&gt;</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3758" data-end="3761" />
<h2 data-start="3763" data-end="3778">📌 Summary</h2>
<ul data-start="3780" data-end="4017">
<li data-start="3780" data-end="3841">
<p data-start="3782" data-end="3841"><strong data-start="3782" data-end="3802">Blade Components</strong> make views <strong data-start="3814" data-end="3838">modular and reusable</strong>.</p>
</li>
<li data-start="3842" data-end="3886">
<p data-start="3844" data-end="3886">Can be <strong data-start="3851" data-end="3866">class-based</strong> or <strong data-start="3870" data-end="3883">anonymous</strong>.</p>
</li>
<li data-start="3887" data-end="3941">
<p data-start="3889" data-end="3941">Support <strong data-start="3897" data-end="3906">props</strong> and <strong data-start="3911" data-end="3920">slots</strong> (default + named).</p>
</li>
<li data-start="3942" data-end="4017">
<p data-start="3944" data-end="4017">Ideal for building <strong data-start="3963" data-end="3978">UI elements</strong> like buttons, modals, alerts, cards.</p>
</li>
</ul>

Web Technology View More