ddfsn / blade-components
  1. Blade Components
  5. Installation

Installation

Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.

Prerequisites

Blade Components requires the following before installing:

Laravel

Version ^9.0 or later

TailwindCSS

Version ^3.4.10 or later

Install Blade Components

Blade Components can be installed via composer by running the following command from your project root:

composer require ddfsn/blade-components

Setting up Tailwind CSS

Blade Components uses Tailwind CSS for its default styling. If you already have Tailwind installed in your project, just add the following configuration to your tailwind.config.js config file:

export default {
    darkMode: 'class',

    content: [
        ...,
        './vendor/ddfsn/blade-components/resources/**/*.blade.php',
    ],

    ...
}

Please refer to the Tailwind documentation if you don't have Tailwind installed already.

Setting up Blade Colors

Colors are managed trough the complimentary Blade Colors package. Blade Colors offers Tailwind CSS compatible, CSS variable based, color palettes. You will find the full documentation on the dedicated documentation page.

Blade Colors is automatically installed with Blade Components. After installation the @bladeColor directive needs be added to your layouts <head> section:

<head>
    ...
    @bladeColor
</head>

Customizing Theme Colors

Blade Components implements the default primary color definition offered by Blade Colors for some of its components. You can customize this to your liking, for a detailed explanation please refer to the dedicated documentation page.

Publishing Configuration

You can publish the package configuration using the following command:

php artisan vendor:publish --tag=blade-components-config

Publishing the package configuration allows you to disable or add components.

Publishing Views

You can publish the package views using the following command:

php artisan vendor:publish --tag=blade-components-views

After publishing you can modify the views from your application's /resources/views/vendor/blade-components directory.

Next

Alert