PHPackages                             wallacemaxters/bless-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. wallacemaxters/bless-ui

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

wallacemaxters/bless-ui
=======================

The Bless UI is a package to make easy your ui elements with tailwindcss or another framework

0.1.2(1y ago)0313MITPHP

Since Sep 14Pushed 1y ago1 watchersCompare

[ Source](https://github.com/wallacemaxters/bless-ui)[ Packagist](https://packagist.org/packages/wallacemaxters/bless-ui)[ RSS](/packages/wallacemaxters-bless-ui/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (3)Versions (7)Used By (0)

[![](https://raw.githubusercontent.com/wallacemaxters/arts/master/bless-ui/logo.png)](https://raw.githubusercontent.com/wallacemaxters/arts/master/bless-ui/logo.png)

Bless UI
========

[](#bless-ui)

The Bless UI package is a set of *headless* Blade components whose styles can be modified via a configuration file. This allows you to create styles for components previously defined by Bless UI, without worrying about their behavior.

Bless UI works perfectly with Tailwindcss, but it is also possible to define style classes from other css frameworks.

Install
-------

[](#install)

To install Bless UI in your Laravel application, you need to use composer, as follows:

```
composer require wallacemaxters/bless-ui
```

After installation, you can make the components available for use in your Blade Views through the `bless-ui:list-components` command.

Components Avaliable
--------------------

[](#components-avaliable)

Componentsui::avatarui::buttonui::cardui::checkboxui::containerui::h1ui::h2ui::h3ui::h4ui::h5ui::h6ui::inputui::labelui::radioui::sectionui::selectui::textareaUsage
-----

[](#usage)

To start using Bless UI, you need to generate a configuration file. This can be done using two commands:

`php artisan vendor:publish --tag=bless-ui-config`or

`php artisan bless-ui:make-config`

**Note**: We recommend using `vendor:publish`, as it already provides the configuration file with pre-defined styles. The `bless-ui:make-config` command should be used if you want to start styling from scratch.

Both commands above will generate a `config/bless-ui.php` file.

If you are using Tailwindcss, add the `config/bless-ui.php` value to the `content` property in your `tailwind.config.js` configuration script.

```
export default {
  // ...
  content: [
    // ... another configs
    "config/bless-ui.php",
  ],
};
```

How it works?
-------------

[](#how-it-works)

This configuration file is used to define the styling classes for each Bless UI component. For example, if you want to modify the classes of the `ui::button` component, you must modify the `"button"` key defined in `config/bless-ui.php`

Following this example, the `"base"` key inside `"button"` modifies the main style of `ui::button`. However, if you want to define optional styles, you must define them within the `"variants"` key. When you define something in `"variants"`, you can apply these styles through the `variant` property when using `ui::button`.

Example:

```
return [
    'button' => [
        'base' => [
            'px-5 py-3 duration-500 inline-flex justify-center items-center',
        ],
        'variants' => [
            'normal'  => '',
            'square'  => 'rounded-none border-2 border-black',
            'rounded' => 'rounded-full p-12',
            'rounded-primary' => 'rounded-full p-12 bg-primary text-white hover:bg-black',
        ]
    ]
];
```

```

```

Using the CSS
-------------

[](#using-the-css)

If you don't want to use `config/bless-ui.php` file to define the styles of Bless UI components, you can generate the CSS File.

Using the `php artisan bless-ui:make-tailwindcss` command, you will generate a css file with the default definitions of the Bless UI components, which you can also change as you wish.

In Bless UI, we use Tailwindcss to generate the css file.

For example:

```
php artisan bless-ui:make-tailwindcss
# or
php artisan bless-ui:make-tailwindcss custom-bless-ui
```

The command above will generate the `resources/css/bless-ui.css`, or `resources/css/custom-bless-ui.css` in second case.

Now, you can add this generated file to your Blade layout.

```

    @vite(['resources/css/bless-ui.css'])

```

And your `vite.config.js` file:

```
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/bless-ui.css'],
            refresh: true,
        }),
    ],
});
```

Generate Custom Components
--------------------------

[](#generate-custom-components)

If you want to use the same structure of Bless UI to make your custom components, you can use the `bless-ui:make-component` command.

For example:

```
php artisan bless-ui:make-component hero
```

The file `resources/views/vendor/bless-ui/components/hero.blade.php` will be generated.

You should be insert the `'hero'` in `'components'` section of `config/bless-ui.php` file to define styles for your generated component.

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance39

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity37

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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 ~88 days

Recently: every ~109 days

Total

6

Last Release

528d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/983cda3e30a5a58d250f3bef7360267e0185b46e891f2f08e6683d0af9a9ddc7?d=identicon)[wallacemaxters](/maintainers/wallacemaxters)

---

Top Contributors

[![wallacemaxters](https://avatars.githubusercontent.com/u/5245865?v=4)](https://github.com/wallacemaxters "wallacemaxters (40 commits)")

---

Tags

bladecomponentscsslaraveltailwindcssthemeuibladetailwindcss

### Embed Badge

![Health badge](/badges/wallacemaxters-bless-ui/health.svg)

```
[![Health](https://phpackages.com/badges/wallacemaxters-bless-ui/health.svg)](https://phpackages.com/packages/wallacemaxters-bless-ui)
```

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[area17/blast

Storybook for Laravel Blade

308664.1k](/packages/area17-blast)[hasinhayder/tyro-login

Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13

2362.2k2](/packages/hasinhayder-tyro-login)[electrik/slate

Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project

102.3k1](/packages/electrik-slate)

PHPackages © 2026

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