Support the ongoing development of Laravel.io →
Article Hero Image

Launching Blade UI Kit

2 Sep, 2020 2 min read

Photo by Alvaro Reyes on Unsplash

Launching Blade UI Kit v0.1

After months of development, testing and fine-tuning, I'm happy to say that the very first version of Blade UI Kit is finally publicly available.

Blade UI Kit is a set of renderless components to utilise in your Laravel Blade views. In all essence, it's a collection of useful utilities, connecting the dots between different parts of the TALL stack. It was made for Blade, Laravel's powerful templating engine.

By default, Blade UI Kit ships with components like:

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

To give you a practical introduction example, let's look at the way how Blade UI Kit's alert component replaces Laravel's default alert snippet from its UI scaffolding:

@if (session('status'))
    <div class="alert alert-success" role="alert">
        {{ session('status') }}
    </div>
@endif

This is turned into this:

<x-alert class="alert alert-success"/>

As you can see, all the implementation details about the behaviour of the component are hidden away. Making it up to you to decide how to style it.

All of Blade UI Kit's components were designed with this in mind. Letting you worry less about implementation details and allowing you to focus on what truly matters: building your app. All while providing a great developer experience.

To give you a more proper demonstration of the library, I've built an example Laravel project that makes use of some of the components from Blade UI Kit.

Right now, Blade UI Kit is at its infant stage, meaning it probably still has some design flaws that we'll hopefully resolve in the future when the library matures and more people start using it. I'm inviting anyone who wants to contribute to head over to the main repository and help out by sending in pull requests or creating thoughtful issues on how we can add more and better components and improve the core mechanics.

I've worked hard to make sure the library helps you in your workflow and hope it tackles some of the pain points you experience when building your Laravel apps. Let me know on Twitter what you think by tweeting with the #BladeUIKit hashtag!

Enjoy building your next app with Blade UI Kit!

Last updated 2 months ago.

joedixon, wmandai, sarwarahmed, imanghafoori1, maxcelos, devansh0207, jorqensen, pavlovich4, rocharomulo liked this article

10
Like this article? Let the author know and give them a clap!
driesvints (Dries Vints) I work for Laravel and maintain Laravel.io. Creator of Eventy.

Other articles you might like

Article Hero Image January 14th 2025

Serve a Laravel project on Web, Desktop and Mobile with Tauri

How to display a Laravel project simultaneously on the web, your operating system, and your mobile d...

Read article
Article Hero Image December 13th 2024

How to add WebAuthn Passkeys To Backpack Admin Panel

Want to make your Laravel Backpack admin panel more secure with a unique login experience for your a...

Read article
Article Hero Image December 13th 2024

Quickest way to setup PHP Environment (Laravel Herd + MySql)

Setting up a local development environment can be a time taking hassle—whether it's using Docker or...

Read article

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.