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.

Automatic install

composer require robsontenorio/mary
 
php artisan mary:install

Then, start the dev server.

yarn 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

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" />

maryUI
Sponsor