BEM view components in Laravel

v1.1.0 2022-02-11 14:20 UTC

This package is auto-updated.

Last update: 2022-06-11 15:13:59 UTC


This package introduces a BemComponent class that you can use instead of the regular Component, which gives you a few helper methods to aid you with your bem-style workflow.


You can install the package via composer:

composer require whitecube/bem-components



namespace App\View\Components;

use Whitecube\BemComponents\BemComponent;

class Btn extends BemComponent
    public $href;
    public $icon;

     * Create a new component instance.
     * @return void
    public function __construct($href, $icon = null)
        $this->href = $href;
        $this->icon = $icon;

     * Get the view / contents that represent the component.
     * @return \Illuminate\View\View|string
    public function render()
        return view('components.btn');

<a href="{{ $href }}" class="{{ $bem('btn') }}">
        <span class="btn__icon" data-icon="{{ $icon }}"></span>
    {{ $slot }}

Now you can pass modifiers as you please

<x-btn href="#" modifiers="error">Error</x-btn>
will result in 
<a href="#" class="btn btn--error">Error</a>

<x-btn href="#" modifiers="primary icon" icon="calendar">Calendar</x-btn>
will result in 
<a href="#" class="btn btn--primary btn--icon">
    <span class="btn__icon" data-icon="calendar"></span>

Available methods

$bem($base): string

Get the compiled bem classes with modifiers. The modifiers are specified using the modifiers prop on your component, which accepts either a string of space-separated modifiers, or an array.

For example, calling $bem('btn') on these:

<x-btn modifiers="primary error" />
<x-btn :modifiers="['primary', 'error']" />

Will output btn btn--primary btn--error

Any additional classes are also kept:

<x-btn modifiers="primary error" class="header__btn" />

Will output header__btn btn btn--primary btn--error

$hasModifier($modifier): bool

Checks if the specified modifier is applied on this component.

$hasClass($class): bool

Checks if the specified class is applied on this component.

💖 Sponsorships

If you are reliant on this package in your production applications, consider sponsoring us! It is the best way to help us keep doing what we love to do: making great open source software.


Feel free to suggest changes, ask for new features or fix bugs yourself. We're sure there are still a lot of improvements that could be made, and we would be very happy to merge useful pull requests.


Made with ❤️ for open source

At Whitecube we use a lot of open source software as part of our daily work. So when we have an opportunity to give something back, we're super excited!

We hope you will enjoy this small contribution from us and would love to hear from you if you find it useful in your projects. Follow us on Twitter for more updates!