Components

You can install this package via composer:

composer require luvi-ui/laravel-luvi

Once installed you can publish individual components by running:

php artisan vendor:publish --tag=component-name --force

Where you replace component-name with the name of the component you want to publish. For example:

php artisan vendor:publish --tag=alert --force

This will copy the component to yourresources/views/components folder.

Prerequisites

For Luvi UI to work you need to have the following dependencies installed:

• Laravel
• Tailwind CSS
• Livewire or Alpine.js

Luvi UI is going to publish Blade components you can use in your existing projects. Some of these components require Alpine.js in order to work. Livewire comes already bundled with Alpine.js or you can install Alpine.js independently. For either case we have configuration steps in the following sections.

Livewire

You can install Livewire as described in the installation guide here . Ensure that Livewire injects its Javascript on your page as described in the docs. You also need to install the following plugins:

npm install @alpinejs/anchor @alpinejs/collapse

Some components require JavaScript to work. You can add the necessary JavaScript to your app.js file:

import collapse from "@alpinejs/collapse";
import anchor from "@alpinejs/anchor";
 
document.addEventListener(
    "alpine:init",
    () => {
        const modules = import.meta.glob("./plugins/**/*.js", { eager: true });
 
        for (const path in modules) {
            window.Alpine.plugin(modules[path].default);
        }
        window.Alpine.plugin(collapse);
        window.Alpine.plugin(anchor);
    },
    { once: true },
);

Alpine

You can install Alpine.js as described in the Alpine.js installation guide here . You need to install the following plugins:

npm install @alpinejs/anchor @alpinejs/collapse

Some components require JavaScript to work. You can add the necessary JavaScript to your app.js file:

import Alpine from "alpinejs";
import anchor from "@alpinejs/anchor";
import collapse from "@alpinejs/collapse";
 
Alpine.plugin(anchor);
Alpine.plugin(collapse);
 
const modules = import.meta.glob("./plugins/**/*.js", { eager: true });
 
for (const path in modules) {
    Alpine.plugin(modules[path].default);
}
 
Alpine.start();

Tailwind CSS

If you don't have Tailwind CSS installed in your project you can install it as described in the Tailwind CSS framework installation guide here .

You also need the following plugins:

npm install -D @tailwindcss/forms tailwindcss-animate

To style your components as shown in our examples, you need to publish the Tailwind config and the bundle's CSS file. Please note: Publishing tailwind.config.js will override this file if it is already present in your project. If you have made changes to this file, make sure to back them up and then run:

php artisan vendor:publish --tag=tailwind --force
php artisan vendor:publish --tag=css --force

Make sure you load the published stylesheet in your main template:

@vite(['resources/css/luvi-ui.css', 'resources/css/app.css', 'resources/js/app.js'])

When you bundle your app for production, make sure luvi-ui.css is included in your vite.config.js :

plugins: [
    laravel({
        input: [
            "resources/css/app.css",
            "resources/css/luvi-ui.css", 
            "resources/js/app.js",
        ],
        refresh: true,
    }),
],

Icons

If you would like to have the same look and feel as seen in the examples, you need to install the Lucide icon set:

composer require mallardduck/blade-lucide-icons