bladewindUI

Customizing BladewindUI

BladewindUI has been designed to not interfere with the existing components in your project. Probably you just want to take this for a spin before deciding if BladewindUI components will be the only components you use in your project. All BladewindUI components exist in your project's resources > views > components > bladewind directory. Per Laravel convention, this results in you having to type the <x-bladewind prefix everytime you want to use a BladewindUI component.

            
                <x-bladewind.button>Save User</x-bladewind.button>
            
        


Getting rid of the bladewind prefix

Using any of the BladewindUI components can be without the bladewind prefix like so <x-button>Save User</x-button>. Achieving this is actually quite easy. Simply move all the blade files in resources > views > components > bladewind into resources > views > components. You can then delete the bladewind folder from your resources > views > components folder since it's technically empty at this point.

Please note that this will overwrite any files you have in your resources > views > components directory with the same names as what you are copying over from resources > views > components > bladewind


If you are not into the Blues...

The primary precompiled color theme used for the BladewindUI components is blue. If your primary theme is not blue, you can change this in a few steps. This assumes you have some knowledge of Tailwind CSS and how to compile changes made to Laravel's app.css file.

From your command line, while at the root of your Laravel project, type the following command to publish the uncompiled css files for the BladewindUI components.

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=raw-css --force

You should now have in your resources directory, a bladewind folder containing all the uncompiled tailwind css files. Refer to this article if you are not familiar with compiling assets in Laravel.


You can change everything

Truely, you can! These components are in essence just Laravel blade templates that sit right there in your project. If there are any implementations you are unhappy with, simply locate the particular blade template and dissect it at will.

Something to keep in mind though. Most Bladewind updates we roll out may affect the blade files, css and js files. Updates that touch the css and js files require the library's assets to be republished. This is done automatically. If you wish to manually publish the assets just to be sure, run the command below.

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=laravel-assets --force

To prevent any changes you made earlier from being overwritten by updates, we advise you to make all changes that overwrite Bladewind classes in your project's css file instead of editing the Bladewind css file directly.