Re-usable Blade components for Laravel projects using Blade UI Kit
Recently, a prominent member of Laravel community, Dries Vints, has pre-released a pretty exciting open-source project called Blade UI Kit.
Quoting from its official GitHub reposirtory,
Blade UI Kit is a set of renderless components to utilize in your Laravel Blade views.
In a nutshell, Blade UI Kit provides you a set of re-usable Blade components that you might be using across your Laravel projects repeatedly.
For instance, let’s say, you want to add a password input in your project. In that case, all you’ll need to do is add the following component from Blade UI Kit in your Blade view like so.
<x-password />
This will output the following HTML:
<input name="password" type="password" id="password" />
You can even customize some of the attributes such as name and class like so.
<x-password name="my_password" class="p-4" />
This will output the following HTML:
<input name="my_password" type="password" id="my_password" class="p-4" />
There are currently 26 components in the library that are ready to use including components such as Form, Color Picker, Markdown, Avatar, Mapbox to name a few.
You can check all of them in its documentation.
Features
Here are some of the features of Blade UI Kit:
- Plug-and-play - You can immediately start using these components once installing the package.
- Extensible - All these components are extensible meaning these can be easily extended and all of the component views can be published, allowing you to go pretty far in terms of customizing them.
- Renderless - These components are renderless meaning they ship without any styling applied to them. This puts you in full control of how they look and feel.
Installation
You can get started with this package by installing it using the following command before clearing the config cache.
$ php artisan config:clear
$ composer require blade-ui-kit/blade-ui-kit
And that’s it! You can start using all the goodies that this package offers.
Of course, there are some of the things that you can customize. Such as changing the prefix of the Blade UI Kit component or changing their name entirely according to your need. All the instructions to do so has been beautifully explained on this page.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
