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.

# This will change after v2 release
composer require robsontenorio/mary:V2.x-dev
 
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.