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.

Components
27
Downloads
1171430
Contributors
19

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.

<?php

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" />
Workcation

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