Github Github
  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 ^4.0 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 CSS installed already.

Setting up Blade Colors

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

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

<head>
    ...
    @ddfsnStyles
</head>

Theme customization

Blade Components implements the "default theme" offered by Blade Colors. You can customize this to your liking, for a detailed explanation please refer to the theming documentation.

On This Page