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.

Bootcamp

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

Automatic install

After installing make sure to check the Layout and Sidebar docs.

composer require robsontenorio/mary
 
php artisan mary:install

Then, start the dev server.

yarn dev   # or `npm run dev`

You are done!

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' => ''
];

php artisan view:clear

Starter kits

For existing projects that uses starter kits (Breeze, Jetstream and FluxUI), 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.

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.