PHPackages                             chrisrhymes/bulma-blade-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. chrisrhymes/bulma-blade-ui

ActiveLibrary[Templating & Views](/categories/templating)

chrisrhymes/bulma-blade-ui
==========================

A set of Bulma components for Laravel Blade

v0.2.2(2y ago)175951MITPHP

Since Feb 10Pushed 2y ago2 watchersCompare

[ Source](https://github.com/chrisrhymes/bulma-blade-ui)[ Packagist](https://packagist.org/packages/chrisrhymes/bulma-blade-ui)[ GitHub Sponsors](https://github.com/chrisrhymes)[ RSS](/packages/chrisrhymes-bulma-blade-ui/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (15)Used By (0)

Bulma Blade UI
==============

[](#bulma-blade-ui)

[![Packagist Downloads](https://camo.githubusercontent.com/e320a91636df7757893bc3359a0f7f4bf193ebbaf299ee8fd1e050bbbb028c1b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f63687269737268796d65732f62756c6d612d626c6164652d7569)](https://camo.githubusercontent.com/e320a91636df7757893bc3359a0f7f4bf193ebbaf299ee8fd1e050bbbb028c1b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f63687269737268796d65732f62756c6d612d626c6164652d7569)[![GitHub Repo stars](https://camo.githubusercontent.com/ea84c954f096efd9f0adb3079a240a40746a860831f6c028ad52c92a9c4e46fd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f63687269737268796d65732f62756c6d612d626c6164652d75693f7374796c653d736f6369616c)](https://camo.githubusercontent.com/ea84c954f096efd9f0adb3079a240a40746a860831f6c028ad52c92a9c4e46fd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f63687269737268796d65732f62756c6d612d626c6164652d75693f7374796c653d736f6369616c)[![GitHub forks](https://camo.githubusercontent.com/decb596e3e361253e79c649fba678833c842004da57c81a00c596c74e5591e87/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f63687269737268796d65732f62756c6d612d626c6164652d75693f7374796c653d736f6369616c)](https://camo.githubusercontent.com/decb596e3e361253e79c649fba678833c842004da57c81a00c596c74e5591e87/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f63687269737268796d65732f62756c6d612d626c6164652d75693f7374796c653d736f6369616c)[![GitHub Workflow Status](https://camo.githubusercontent.com/3321ffd98a64884b523f4a81730b8276cf3a065e104513af0724cba5d25f7d39/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f63687269737268796d65732f62756c6d612d626c6164652d75692f7068702e796d6c3f6272616e63683d6d6173746572)](https://camo.githubusercontent.com/3321ffd98a64884b523f4a81730b8276cf3a065e104513af0724cba5d25f7d39/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f63687269737268796d65732f62756c6d612d626c6164652d75692f7068702e796d6c3f6272616e63683d6d6173746572)

A set of [Laravel Blade components](https://laravel.com/docs/8.x/blade#components) for the [Bulma](https://bulma.io) Frontend Framework. Built for Laravel 8.x and Bulma 0.9.x.

This package also contains authentication views to use with [Laravel Fortify](https://laravel.com/docs/8.x/fortify).

Contents
--------

[](#contents)

- [Getting Started](#getting-started)
    - [Alpine js](#alpine-js)
- [Publishing Views](#publishing-views)
- [Components](#components)
    - [Inputs](#inputs)
        - [Options](#options)
        - [Read Only](#read-only)
        - [Placeholder](#placeholder)
        - [Additional Classes](#additional-classes)
    - [Card](#card)
    - [Media](#media)
    - [Message](#message)
    - [Notification](#notification)
    - [Tabs](#tabs)
    - [Modal](#modal)
- [Views](#views)
    - [Pagination](#pagination)
    - [Simple Pagination](#simple-pagination)
- [Auth Views](#auth-views)
- [Tests](#tests)

Getting Started
---------------

[](#getting-started)

```
composer require chrisrhymes/bulma-blade-ui
```

The package should auto discover in Laravel 8.

### Alpine JS

[](#alpine-js)

Some components have some interactivity, such as notifications being dismissed. The components in this package have been pre-configured to use [Alpine JS](https://github.com/alpinejs/alpine) as it is a small and easy to use JavaScript package.

Therefore, to make use of this interactivity you will need to include Alpine JS within your Laravel app.

Publishing Views & Config
-----------------------------

[](#publishing-views--config)

If you want to use the auth views in the package then you will need to publish the config so you can overwrite the default configuration.

`php artisan vendor:publish --tag=config --provider=BulmaBladeUi\\BulmaBladeUiServiceProvider`

If you would like to publish the views you can do so with the following command. It may lead to difficulties updating at a later if you customise the components.

`php artisan vendor:publish --provider=BulmaBladeUi\\BulmaBladeUiServiceProvider`

Components
----------

[](#components)

The package has the following components available:

- card
- checkbox
- error
- horizontal-input
- horizontal-multi-checkbox
- horizontal-radio
- horizontal-select
- horizontal-textarea
- input
- media
- message
- modal
- modal-card
- multi-checkbox
- notification
- radio
- select
- submit
- tabs
- textarea

The components are in the `bbui` namespace.

```

```

### Inputs

[](#inputs)

- There are standard (with the label above the input) and horizontal inputs (with the label to the left of the input) available.
- All inputs expect a label, name and value (except submit).
- You can set `:required="true"` on the input to add the required tag.
- Set the type on submit to override the 'is-primary' default button class.

#### Options

[](#options)

Select, radio and multi-checkboxes expect an array of options `:options="['value' => 'label', 'value2 => 'label2']"`

```

@php($trees = ['oak' => 'Oak', 'ash' => 'Ash', 'maple' => 'Maple'])

```

#### Read Only

[](#read-only)

The following input components can be made readonly by setting `:readonly="true"`

- horizontal-input
- horizontal-textarea
- input
- textarea

#### Placeholder

[](#placeholder)

The following input components can have a placeholder set by setting the `placeholder="The placeholder text"`

- horizontal-input
- horizontal-select
- horizontal-textarea
- input
- select
- textarea

#### Additional Classes

[](#additional-classes)

Bulma allows you to set the colours, sizes and states for `input`, `textarea` and `select`. You can pass in the additional classes and they will be added to the component.

```

```

This applies to the following input components

- horizontal-input
- horizontal-select
- horizontal-textarea
- input
- select
- textarea

### Livewire Inputs (Experimental)

[](#livewire-inputs-experimental)

To use inputs with Livewire, set the `wire:model="modelName"` as an attribute with the relevant model name. You don't need to set the `value=""` if using the `wire:model`.

```

```

You can also add `defer`, `lazy` or `debounce` to the following inputs:

- horizontal-input
- horizontal-textarea
- input
- textarea

```

```

### Card

[](#card)

The card allows a card with a title or with an image. The card also allows a footer by using the named slot.

```

    Card content goes here

    Card content goes here

    Card content goes here

        Footer item

```

### Media

[](#media)

Media accepts an image for the media-left, the content and an optional media right using the named slot.

```

    The media content

    The media content

```

### Message

[](#message)

The message allows you to override the type from the default 'is-info'. Alpine.js is required to dismiss the message.

From v0.1.3 the title is optional. If no title is provided then the message-header will not be displayed.

```

    The message content

    The message content

    The message content

```

### Notification

[](#notification)

The notification allows you to override the type from the default 'is-info'. Alpine.js is required to dismiss the notification.

```

    The notification content

    The notification content

```

### Tabs

[](#tabs)

- Pass in an array of items, setting the 'key' => 'value' for each, where the value will be used as the tab label.
- Create an x-slot for each of the items, setting the slot name set as the 'key' from the items array. Place the tab content inside the slot.
- You can overwrite the type of tabs by setting the `type`.
- You can overwrite which tab displays by default by setting the `default`.

The tabs component uses Alpine.js to show and hide the tab content.

```

        The first tab content

        The second tab content

        The first tab content

        The second tab content

        The first tab content

        The second tab content

```

### Modal

[](#modal)

There are modal and modal-card components. Both require Alpine.js.

- Both require a `` to define the content of the button that will trigger the modal.
- The modal component will display the content that is provided using the default `$slot`.
- You can override the trigger button class by setting the type. By default, it uses `is-primary`.
- Modal card requires a `title`
- Modal card has a footer slot that contains a Cancel button to close the modal. You can override the cancel text by setting `cancel="Cancel"` attribute.
- If you add a button to the footer that also closes the modal then ensure you add `@click="active = false"` to the button.

```

        Open Modal

        Modal content

        Open Modal

        Delete

    Are you sure you want to delete this?

            Confirm

```

Views
-----

[](#views)

### Pagination

[](#pagination)

The pagination view provides next, previous and a pagination list of page numbers. The page numbers are centered between the next and previous page buttons.

You can use the pagination view for the package by setting the view in the `->links()` method, as shown below, or using other methods described in the [Laravel docs](https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view).

```
@php($users = User::paginate())

{{ $users->links('bbui::pagination') }}
```

For Livewire pagination, use the `bbui::livewire.pagination` view. This replaces the href with the relevant wire:click settings.

### Simple Pagination

[](#simple-pagination)

The simple pagination view provides next and previous page buttons.

You can use the simple pagination view for the package by setting the view in the `->links()` method, as shown below, or using other methods described in the [Laravel docs](https://laravel.com/docs/8.x/pagination#customizing-the-pagination-view).

```
@php($users = User::paginate())

{{ $users->links('bbui::simple-pagination') }}
```

For Livewire simple pagination, use the `bbui::livewire.simple-pagination` view. This replaces the href with the relevant wire:click settings.

Auth Views
----------

[](#auth-views)

If you use Laravel Fortify and want to make use of the package's authentication views then set the below in the boot() method of your `App\Providers\FortifyServiceProvider`

```
Fortify::loginView(fn () => view('bbui::auth.login'));
Fortify::registerView(fn () => view('bbui::auth.register'));
Fortify::requestPasswordResetLinkView(function () {
    return view('bbui::auth.forgot-password');
});
Fortify::resetPasswordView(function ($request) {
    return view('bbui::auth.reset-password', ['request' => $request]);
});
```

Then set the view component you wish to extend by updating the `'auth_extends' => 'bbui::default-layout'` in the bulma-blade-ui.php config file.

Tests
-----

[](#tests)

The package has basic tests for the components. To run the tests

```
composer test
```

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 91.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~81 days

Recently: every ~209 days

Total

13

Last Release

942d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e30b61173703505b9c2cf784df20acbe3b564f97bae3e24803fad6af8a08b514?d=identicon)[chrisrhymes](/maintainers/chrisrhymes)

---

Top Contributors

[![chrisrhymes](https://avatars.githubusercontent.com/u/4160546?v=4)](https://github.com/chrisrhymes "chrisrhymes (21 commits)")[![eclipxe13](https://avatars.githubusercontent.com/u/1266852?v=4)](https://github.com/eclipxe13 "eclipxe13 (2 commits)")

---

Tags

bulmabulma-csscomponents-librarylaravellaravel-package

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/chrisrhymes-bulma-blade-ui/health.svg)

```
[![Health](https://phpackages.com/badges/chrisrhymes-bulma-blade-ui/health.svg)](https://phpackages.com/packages/chrisrhymes-bulma-blade-ui)
```

###  Alternatives

[mustache/mustache

A Mustache implementation in PHP.

3.3k44.6M291](/packages/mustache-mustache)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)