Getting Started

BladewindUI is a collection of super simple but elegant Laravel blade-based UI components using TailwindCSS and vanilla Javascript. When I decided to move away from JQuery, that indirectly meant I had to find an alternative to the lovely Semantic UI components I had gotten so used to. Well, that was how these components were born.

Requirements

Bladewind components are purely Laravel blade components sprinkled with some TailwindCSS sauce. This means you absolutely need to be using Bladewind in a Laravel project. The package has the following dependencies:

- PHP >= 7.3
- Laravel >= 8.x

Install

At the root of your Laravel project, type the following composer command in your terminal to pull in the package.

composer require mkocansey/bladewind

Next you need to publish the package's public assets by running the command below, still at the root of your Laravel project. This will create a vendor/bladewind directory in your public directory.

        
            php artisan vendor:publish --tag=bladewind-public --force

IMPORTANT: Always publish assets when you update to a new version of BladewindUI since it is likely some CSS and JS might have been updated. See Update Notes at the bottom of this page.

Now, include the BladewindUI css and helper javascript files in the <head> of your pages. This should ideally be done in the layout file your app pages extend from. Your app's css and js files should come after the Bladewind files so your customizations (if any) can take effect.

        
        <!-----------------------------------------------------------
-- animate.min.css by Daniel Eden (https://animate.style)
-- is required for the animation of notifications and slide out panels
-- you can ignore this step if you already have this file in your project
--------------------------------------------------------------------------->

<link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />

        
            <link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />

        
        <script src="{{ asset('vendor/bladewind/js/helpers.js') }}"></script>

Finally! If you intend to use the Datepicker component you will need to pull in AlpineJs. Include the code below in your <head>. You can ignore this step if you are already using AlpineJs in your project.

        
            <script src="//unpkg.com/alpinejs" defer></script>

You are now ready to start using any of the BladewindUI components in your application

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

        
            <x-bladewind::code />

You can define your primary, secondary and dark mode colours in your project's tailwind.config.js file. More on customizing colours here.

Publishing Components

You will notice from the example above we had to use two colons after x-bladewind. This is because we are serving the views from the package's directory in vendor/mkocansey. To use the usual dot syntax when calling Laravel components, you will need to publish the BladewindUI views to your views directory using the command below.

php artisan vendor:publish --tag=bladewind-components --force

The Bladewind components now exist in your resources > views > components > bladewind directory. You can now access any of the Bladewind components using the dot syntax.

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

If you decide to go with the dot syntax, it is important to always publish the BladewindUI components after any update.

If you intend to use bladewindUI in a Laravel 8.x project, please do well to read this.

Updating BladewindUI

Running composer update at the root of your project will pull in the latest version of BladewindUI depending on how your dependencies are defined in composer.json.

composer update

It is important to republish the assets after every update to pull in any new css and js changes. Run the command below to publish the BladewindUI assets.

php artisan vendor:publish --tag=bladewind-public --force

If you access the BladewindUI components using the dot syntax, you will need to also republish the components view files by running the command below.

php artisan vendor:publish --tag=bladewind-components --force

To automate publishing of the BladewindUI files every time you run composer update, you can add the following lines to your composer.json file under the scripts key.

        
        // composer.json
        ...
        "scripts": {
        ...
            "post-update-cmd": [
                "@php artisan vendor:publish --tag=laravel-assets --ansi",
                "@php artisan vendor:publish --tag=bladewind-public --force",
                // add this next line if you also want to automatically publish
                // the components to your resources > views > components directory
                "@php artisan vendor:publish --tag=bladewind-components --force"
            ],
            ...

IMPORTANT: Any changes you may have made to the BladewindUI component view files will be lost anytime you publish the components or enable automatic publishing of the components.