Re-usable Blade components for Laravel projects using Blade UI Kit

Tram Ho


Recently, a prominent member of the Laravel community, Dries Vints, has released an attractive open source project called the Blade UI Kit .

Blade UI Kit is a package consisting of pre-made components , your job is to just use it in your Blade Views, of course you can extend and customize it.

By default, the Blade UI Kit includes components such as:

  • A countdown timer
  • Markdown and rich text editors
  • An avatar generator
  • Form inputs
  • Markdown to HTML converter
  • Date & Color pickers

And there are many cool components on this too, you can see the details on the Document

2. Get started


  • PHP 7.3 or higher
  • Laravel 7.0 or higher


Before installing a package , you should clear your configuration cache:

Then install by shaking:

Kiểm TRA

To show an alert in the usual way, you usually code

But with the divine Blade UI Kit , we only need one line of code (actually we include 1 components )

To create an input password

To create a Form

To create Form File Uploads


To change the name and class of the password input , just like HTML we add two attributes

After rendering the HTML :


This is a project developed based on components from Blade UI Kit : Example Laravel project

3. Conclusion

The Blade UI Kit is currently in development, which means it might still have some bugs until it’s finalized.

Hopefully with this package you can shorten the time to complete the HTML for your view blade .

Sincerely goodbye and win!

Share the news now

Source : Viblo