Installation

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

Include asset directives

After installation the @ddfsnAppearance, @ddfsnStyles and @ddfsnScripts directives need to be added to your layout:

<head>
    ...
    @ddfsnAppearance
    @ddfsnStyles
</head>
<body>
    ...
    @ddfsnScripts
</body>

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 resources/css/app.css file:

@import 'tailwindcss';
@import '../../vendor/ddfsn/blade-components/resources/css/blade-components.css';

@source '../../vendor/ddfsn/blade-components/resources/**/*.blade.php';

@custom-variant dark (&:where(.dark, .dark *));

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

Disable automatic dark mode handling

By default, Blade Components will apply the dark mode appearance automatically by applying the .dark class to the html element. Dark mode is chosen based on the user's system preference or previously selected appearance.

If you don't want Blade Components to handle this for you, you can remove the @ddfsnAppearance directive from your layout file.

Theme customization

Blade Components comes with a "default theme". You can customize this to your liking, for a detailed explanation please refer to the theming documentation.

#Prerequisites

Laravel

TailwindCSS

#Install Blade Components

#Include asset directives

#Setting up Tailwind CSS

#Disable automatic dark mode handling

#Theme customization