Check out my latest project, Eventy. The event platform for the rest of us!
Dries Vints

Launching Blade UI Kit

Published on September 2, 2020

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.

Before we dive into the library I'd like to take a small detour in this post.

What happened to Eventy?

Some of you might remember that last year in October I announced Eventy, an app for user groups, conferences, speakers and more. I had big hopes for it and wanted to seriously invest my time into building it. So what happened?

I got... side tracked. Something that happens to me a lot is that when I'm developing apps is that I notice (small) opportunities to extract some of the work into a side project. This way I make my life (and that of others) easier the next time I'm facing a similar problem.

This philosophy is baked into the Laravel community. There are so many examples in our community of people creating libraries and side projects because they were facing a problem and didn't want to repeat themselves all the time.

Blade UI Kit is exactly such a project. While working on Eventy I noticed I was fiddling with Markdown rendering, editors, etc. I also started using Spatie's Blade X package that offered Blade components. Eventually these made their way into Laravel 7 and I became intrigued with them on a whole new level. This led me to build Blade UI Kit and the rest is history. A similar thing happened with Cashier Paddle because I want to use Paddle as a payment gateway for Eventy eventually.

So what happens to Eventy? Nothing really, it's just delayed. I'm still planning on building Eventy but nothing is urgent. If I see opportunities to extract things into side projects so others and myself can benefit from that in the future I'll continue to do that.

What is Blade UI Kit?

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:

<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.

Building an ecosystem

Something else I want to achieve with Blade UI Kit is building an entire ecosystem of projects and a community around Laravel Blade and the TALL Stack. I have more projects planned for Blade UI Kit which I hope to announce & release later this year.

Blade Icons is one of those projects which was already released earlier this year. It provides an easy way to handle SVG icons in your Laravel Blade views. We've also built a search into the main website for you to search amongst thousands of available icons.

I've also set up a Discord server for the community to gather and help each other out. Feel free to join in on the conversation!

Thanks

This all wouldn't have been possible by the help of some people. I'd like to thank Caneco for all his work on the artwork for the library. I'd also like thank Adrian Nürnberger & Christian Leo-Pernold for building the icon search on the website.

And of course all of this wouldn't be possible without the original creators of the TALL stack: Adam Wathan, Steve Schoger, Taylor Otwell and Caleb Porzio. Thanks for being such an inspiration!

Conclusion

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!

About me

I'm a software engineer from Belgium. I work as one of the core team members of Laravel, the popular PHP framework.

I'm also the creator of Eventy, a platform that connects the dots between user groups, speakers, conferences and attendees.

My passions are open-source, growing communities, and building products that people love.

© Dries Vints