maryUI

Installation

This package does not ship any custom CSS and relies on daisyUI and Tailwind for out-of-box styling. You can customize most of the components' styles, by inline overriding daisyUI and Tailwind CSS classes.

Please, for further styles reference see daisyUI and Tailwind.

Bootcamp

If you prefer a walkthrough guide, go to maryUI Bootcamp and get amazed how much you can do with minimal effort.

Automatic install 

composer require robsontenorio/mary
 
php artisan mary:install

Then, start the dev server. 

yarn dev   # or `npm run dev`

... You are done!

Go to the Layout section to quickly get started.

Renaming components

If for some reason you need to rename maryUI components using a custom prefix, publish the config file. 

php artisan vendor:publish --tag mary.config
return [
    /**
     * Default is empty.
     *    'prefix' => ''
     *              <x-button />
     *              <x-card />
     *
     * Renaming all components:
     *    'prefix' => 'mary-'
     *               <x-mary-button />
     *               <x-mary-card />
     */
    'prefix' => ''
];
Make sure to clear view cache after renaming. 
php artisan view:clear

Jetstream and Breeze

If you are facing some UI glitches, try to remove @tailwindcss/forms plugin.

For existing projects that uses Jetstream or Breeze, the installer will publish config/mary.php with a global prefix on maryUI components to avoid name collision. So, you need to use components like this:

x-mary-button , x-mary-card x-mary-icon ...

The maryUI components provides a great DX that probably you may want to use its components instead of default Jetstream/Breeze components.

Breeze 

<div>
    <x-input-label for="name" :value="__('Name')" />
    <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
    <x-input-error :messages="$errors->get('name')" class="mt-2" />
</div>

Jetstream 

<div>
    <x-label for="name" value="{{ __('Name') }}" />
    <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
</div>

maryUI 

<x-mary-input label="Name" wire:model="name" />

Still not convinced?

Go to the Bootcamp and get amazed how much you can do with minimal effort, from the ground with no starter kits.

maryUI
Sponsor