Getting Started

Laravel UI Kit is a comprehensive set of view components for Laravel built using Livewire and Blade.

---

Installation

Install Laravel UI Kit

You can install Laravel UI Kit via Composer. Run the following command:

composer require laravel-ui-kit/laravel-ui-kit
    

Install TailwindCSS

Ensure that TailwindCSS is installed in your Laravel project. If you're using starter kits like Jetstream or Breeze, TailwindCSS is included by default. Otherwise, follow the official TailwindCSS documentation for Laravel installation:

Install TailwindCSS with Laravel

Install AlpineJS

Verify that AlpineJS is installed in your Laravel project. It's included by default if you're using Jetstream, Breeze, or Livewire. For manual installation, refer to the AlpineJS documentation:

Install AlpineJS with Laravel

Update TailwindCSS config

TailwindCSS requires paths to all HTML templates, JavaScript components, and other source files containing Tailwind class names.

Add the following paths to your tailwind.config.js file:

/* tailwind.config.js */


export default {
    
    content: [
    
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    
        './storage/framework/views/*.php',
    
        './resources/views/**/*.blade.php',
    

        
        './config/ui-kit/*.php',

        './vendor/laravel-ui-kit/laravel-ui-kit/config/*.php',
    

    ],
    
    ...
    
};

This configuration ensures that TailwindCSS processes all necessary files, including those from Laravel UI Kit.

For older laravel versions <5.5

For Laravel versions prior to 5.5, you need to manually register the service provider and facade.