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. Once installed, all BladewindUI components are invoked from your project-root > vendor > mkocansey > bladewind directory unless published. 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>

Once you publish the BladewindUI components, the files get moved to the resources > views > components > bladewind directory. You can then use the dot, instead of the colon syntax to access a component.

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

Getting rid of the bladewind prefix

It is possible to use any of the BladewindUI components without the bladewind prefix. This <x-bladewind.button>Save User</x-bladewind.button> becomes <x-button>Save User</x-button>. Achieving this is quite easy. This requires that you have run the command to publish Bladewind components . 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 is 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 default precompiled colour 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.

BladewindUI defines its dark mode colours, primary and secondary button colours, colours for the alert and notification components in its tailwind.config.js file.

    
        // your-project/vendor/mkocansey/bladewind/tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.slate,
        dark: colors.slate,
        success: colors.emerald,
        error: colors.red,
        warning: colors.amber,
        info: colors.blue
      }
},

To change the colours used above, simply define overwriting values in your project's tailwind.config.js.

    
        // your-project/tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: colors.indigo,
        secondary: colors.zinc,
        dark: colors.gray,
        success: colors.green,
        error: colors.rose,
        warning: colors.orange,
        info: colors.blue
      }
},

Following the changes above, now all your primary buttons will use the indigo colour palette instead of blue. Dark mode will use the gray palette instead of slate.

If you are feeling geeky

The changes to the Tailwind config should be enough to get you your right colours. If however, for some reason you are in your geeky elements and prefer to access all the uncompiled BladewindUI CSS files, you can run the command below.

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

You should now have in your public directory, a vendor > bladewind > assets folder containing all the uncompiled tailwind css files. You can modify these files to suit your theme specification. Refer to this article if you are not familiar with compiling assets in Laravel.

You can change everything

Truly, you can! These components are in essence just Laravel blade templates that sit right in your project. If there are any implementations you are unhappy with, simply locate the particular blade template and dissect it at will. At the end of every component documentation page, you will find the name of the blade file that defines that component.

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. Run the command below to republish the library's css and js files.

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=bladewind-public --force

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

Changing Datepicker Translations

The Datepicker component is wired to speak a couple of languages. The language files are served from BladewindUI's vendor directory, vendor > mkocansey > bladewind > lang. Currently, the available languages are English, French, Italian, Arabic, German, Chinese and Indonesian. You can add more languages as you see fit or even modify the existing translations. If you want to do this for just your project you will first need to publish the language files by running the command below from the root of your project.

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=bladewind-lang --force

The language files will now be available in your project's lang > vendor > bladewind directory. You can now add more languages or edit the language files that were published.