DEV Community

Cover image for Mary UI: Laravel Blade UI Components for Livewire 3
Robson Tenório
Robson Tenório

Posted on • Updated on

Mary UI: Laravel Blade UI Components for Livewire 3

What?

Mary is a set of gorgeous Laravel blade components made for Livewire 3 and styled around daisyUI + Tailwind. See more at https://mary-ui.com

Why ?

My current background is Laravel + Inertia + Vue and there are many full featured components libraries like Vuetify and Quasar. And that is great because you skip component design process and go straight to what matters.

When Livewire 3 was released I wanted to give a try. But I could not find a comprehensive UI blade package compatible with it.

Breeze and Jetstream are great. But, in some way you are copying/pasting components between projects and I refuse to do it :)

So, here we are.

Tailwind + daisyUI

With daisyUI you have a great start point by like this:

class="btn btn-warning"
Enter fullscreen mode Exit fullscreen mode

Then you can append any Tailwind stuff like this:

class="btn btn-warning p-2 w-full ..."
Enter fullscreen mode Exit fullscreen mode

So, at end of day you are using Tailwind, aided by handfuls classes from daisyUI.

DX

As a developer I like to move fast and truly follow DRY. Mary components does a lot of things with less code.

Here are just a few examples.

Input

Input

List

List

Choices (searchable)

Choices

Get started

It requires you are installing Mary on a brand new Laravel project. The installer also includes a starter layout, a Welcome component and its route.

composer require robsontenorio/mary
php artisan mary:install
Enter fullscreen mode Exit fullscreen mode

Then, start dev server.

yarn dev
Enter fullscreen mode Exit fullscreen mode

But, if you already have a project, it is possible to install Mary manually. See more at https://mary-ui.com

Thank you!

Top comments (4)

Collapse
 
shshank profile image
Shshank

I never knew this package exists until now. Will give it a try for sure. Thanks for sharing

Collapse
 
barrerakj profile image
Kenny Barrera

Do you think is it possible to use it in Filament?

Collapse
 
robsontenorio profile image
Robson Tenório

Honestly I think it is not a good fit, once Fillament has it own set of components and adopts a “programmatic” approach.

Collapse
 
essamamdani profile image
Essa Mamdani

I am personally using this UI for my SaaS AI tool. Thats really awesome and impressive. Thanks for the sharing.