Pre-release out now

A set of renderless components to utilise in your Laravel Blade views. Built for the TALL stack. Completely open-source.

A component for everyone

With 27 different components, we probably have something for you.


Featured components

Whether it's a countdown timer or a map with markers. A wysiwyg editor or rendering Markdown. We offer components for a wide range of use cases.

  • Countdown Timer

    Add a countdown timer for your specified DateTime instance. Modify the look and feel using Blade's power slotted components feature.

  • Wysiwyg

    Want a rich text editor or a Markdown editor? We've got you covered. Blade UI Kit ships with components for the Trix and EasyMDE editors.

  • Mapbox

    Blade UI Kit comes with a map component out of the box (see what we did there?). Easily integrate a map into your app and add some markers to it.

// Render a countdown timer...
<x-countdown :expires="now()->addDays(1)" />

// Render a rich text editor...
<x-trix name="about" />

// Or a Markdown editor...
<x-easy-mde name="about" />

// Render Markdown...
<x-markdown>{!! $markdown !!}</x-markdown>

// Render a map with markers...
<x-mapbox :markers="[[13.4105300, 52.5243700]]" />

You're in full control

Blade UI Kit aims at providing the best possible developer experience. We want you to be in control. Publish, extend and modify all components at will.

  • Plug-and-play

    Install the package and immediately start using the components. Most components come ready out-of-the box, saving you time figuring out how to install them.

  • Extend or publish

    Component classes can be easily extended and all of the component views can be published, allowing you to go pretty far in terms of customizing them.


namespace App\View\Components;

class Mapbox extends \BladeUI\Maps\Mapbox
    public function options(): array
        return array_merge([
            'zoom' => 3,
            'center' => [13.4105300, 52.5243700],
        ], parent::options());

Built for the TALL stack

Blade UI Kit was designed to work smoothly with these technologies.

Finally, Blade gets a comprehensive UI Kit that works with all the things we’re already using!

Blade UI kit is a great set of renderless components for Laravel that let you focus on the parts of your application that are unique, rather than endless boilerplate and expanding snippets.

Blade Icons

A package to easily make use of SVG icons in your Laravel Blade views. Choose from a wide selection of icon sets.

Makes using SVG icons as simple as...

<x-heroicon-s-heart class="h-6 w-6 text-red-600" />

“I wanted to make using Blade components as simple as possible. That's why I built Blade UI Kit.”

© 2024 Dries Vints. Site built with the TALL Stack. Artwork by Caneco.