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());
    }
}