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

This package requires that you are installing Mary on a brand-new Laravel project, without any starter kit like Breeze or Jetstream. The installer also includes a starter layout, a Welcome component and its route.

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 Mary 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

Manual install

If you have an existing Laravel project with a starter kit like Breeze or Jetstream, follow these steps.

Once Mary was primarily designed to work on fresh projects without starter kits, you will have to handle some conflicts by yourself, like component name collisions or existing settings.

Not all steps may apply for some starter kits.

# Livewire 3
composer require livewire/livewire
 
# Mary
composer require robsontenorio/mary
 
# Tailwind and daisyUI
yarn add -D tailwindcss daisyui@latest postcss autoprefixer && npx tailwindcss init -p

Add Mary and Daisy entries to tailwind.config.js.

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        // You will probably also need these lines
        "./resources/**/**/*.blade.php",
        "./resources/**/**/*.js",
        "./app/View/Components/**/**/*.php",
        "./app/Livewire/**/**/*.php",
 
        // Add mary  
        "./vendor/robsontenorio/mary/src/View/Components/**/*.php"
    ],
    theme: {
        extend: {},
    },
 
    // Add daisyUI  
    plugins: [require("daisyui")]
}

Add Tailwind directives to resources/css/app.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Setup Livewire default app template.

# This creates `views/components/layouts/app.blade.php`
php artisan livewire:layout

Then add the @vite directive on the default app template views/components/layouts/app.blade.php.

<head>
    ...
 
    {{-- This  --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
 
<body>...</body>

Finally, start the dev server.

yarn dev

... You are done!

Check the Layout section to quickly get started.

mary

Sponsor