Back to docs

Laravel Windicator

Toggleable indicator bar for your Tailwind responsive layouts.

⚠️  This package is in active development.

Laravel Support

Laravel Laravel Windicator
9 0


You're a Laravel developer using Tailwind CSS to style your UI and would like to quickly identify the responsive breakpoint corresponding to your viewport width for debugging purposes.

You may also wish to provide a custom label to conveniently identify which environment you're looking at in the current browser tab.


Install in your Laravel project via Composer:

cd /path/to/laravel/project
composer require fsac/laravel-windicator

As you will be adding the Windicator component to your application's Blade templates we are intentionally omitting the --dev flag. By default Windicator will not be rendered in any environment other than local.

Publish the Blade components to your project:

php artisan vendor:publish --tag='windicator'

Publishing Windicator's views enables Tailwind to detect classes which should be purged from your production CSS as well as allowing you to customise the aesthetics of the Windicator bar should you wish.

Basic Usage

Add the Windicator Blade component to the top of your base layout so that it is included at the top of every page:

    <x-windicator::bar />
    <!-- page content -->

Sometimes it may be convenient to hide Windicator for a period of time. This can be achieved by clicking the Close button at the right hand side of the bar in your browser. Windicator's visiblity state is stored in your browser's localStorage so that it does not reappear each time the page is refreshed.

When you are ready to use Windicator again open your browser's developer tools and execute the windicator() function in your JavaScript console. In fact, this can be used to toggle the visibility of Windicator without interacting with the bar at all – give it a try!

Advanced Usage


By default Windicator displays the current environment as defined by APP_ENV in your application's .env file at the left side of the bar. You may customise the text displayed using the Blade component's label attribute:

<x-windicator::bar :label="env('MY_WINDICATOR_LABEL')" />

Use in Non-Local Environments

Occasionally it may be convenient to also use Windicator in environments other than local. To achieve this you must first pass an array of allowable environments using the env attribute:

<x-windicator::bar :env="['local', 'production']" />

It is also necessary to define a Gate authorizing view-windicator for the current user. This may be achieved by defining the Gate according to your requirements in the boot method of your AppServiceProvider or similar:

public function boot()
    Gate::define('view-windicator', function ($user) {
        return in_array($user->email, [

Custom Breakpoints

If you have customised the names of Tailwind CSS screen breakpoints then you will also need to customise the $breakpoints array in the published Blade component resources/views/vendor/windicator/bar.blade.php so that the correct classes are applied based on your new conventions.

You will also need to provide icon templates based on your custom breakpoint names in the resources/views/vendor/windicator/commponents/icon directory. Windicator discovers the correct icons by naming convention where the name of the template corresponds to your breakpoint in the format <breakpoint>.blade.php.