What is Mary UI?

Mary UI is a versatile collection of user interface components designed to streamline the development process. Whether you're building a simple website or a complex web application, Mary-UI has got you covered. From buttons and forms to navigation bars and modals, Mary-UI provides a comprehensive set of components to meet your UI needs.

These components are built on top of daisyUI, Tailwind CSS and for Livewire 3. If you’re a Laravel developer and you’re using Livewire, you’ll love Mary UI because it makes it faster and easier to build web pages. Laranepal also using Mary UI for building web pages.

Installation

Let's dive into the installation process and see how easy it is to integrate Mary-UI into your Laravel project.

Step 1: Create a Fresh Laravel Project

Firstly, make sure you have Laravel installed on your system. If not, you can easily install it using Composer or Laravel Installer read more about it:

composer create-project --prefer-dist laravel/laravel project-name

Replace project-name with the desired name for your Laravel project.

Step 2: Install Mary-UI

Once you have set up your Laravel project, open your terminal navigate to the project directory and install Mary-UI via composer command:

composer require robsontenorio/mary

This command fetches the Mary UI package and installs it into your Laravel project. Once the package is successfully installed, execute the following Artisan command:

php artisan mary:install

This command initializes Mary UI within your Laravel project, setting up all the necessary configurations and assets.

After the installation process is complete, ensure that you're running the development server by executing one of the following commands:

yarn dev
//or
npm run dev

Running these commands compiles your assets and starts the development server, allowing you to preview and test your application with Mary UI components.

How does it look like?

Mary UI allows you to use daisyUI components in your Laravel blade files using Livewire syntax.

To make a form like this:

All you need would be these few lines:

<x-form wire:submit="save">
    <x-input label="Name" wire:model="name" />
    <x-input label="Amount" wire:model="amount" prefix="USD" money hint="It submits an unmasked value" />
 
    <x-slot:actions>
        <x-button label="Cancel" />
        <x-button label="Click me!" class="btn-primary" type="submit" spinner="save" />
    </x-slot:actions>
</x-form>

Conclusion

Mary UI is a revolutionary tool for Tall Stack, simplifying the UI development process with its easy installation and extensive collection of high-quality components, enabling developers to create stunning interfaces with minimal effort.

Ready to give Mary UI a try? Head over to Mary-UI to learn more and get started today!