Tailwind Breakpoint Badge for Filament v3 Header

Breakpoint Badge is a lightweight extension for FilamentPHP that adds a real-time breakpoint badge to the header, streamlining the debugging process.

Installation

You can install the package via composer:

composer require chrisreedio/filament-breakpoint-badge

Usage

To use this plugin register it in your panel configuration:

use ChrisReedIO\BreakpointBadge\BreakpointBadgePlugin;

$panel
    ->plugins([
        BreakpointBadgePlugin::make(),
    ]);

Visibility

By default, the plugin displays the breakpoint badge in all non-production environments. You can further customize whether the badges should be shown.

use ChrisReedIO\BreakpointBadge\BreakpointBadgePlugin;

$panel->plugins([
    BreakpointBadgePlugin::make()
        ->visible(fn () => auth()->user()?->can('see_breakpoints'))
]);

Colors

You can overwrite the default colors if you want your own colors or need to add more. The ->color()method accepts any Filament's Color object or a closure that returns a color object.

use pxlrbt\FilamentEnvironmentBadge\EnvironmentBadgePlugin;
use Filament\Support\Colors\Color;

$panel->plugins([
    BreakpointBadgePlugin::make()
        ->color(fn () => match (app()->environment()) {
            'production' => null,
            'staging' => Color::Orange,
            default => Color::Blue,
        })
]);

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Chris Reed
• All Contributors

Special thanks to Adam Weston for the help writing the plugin.

Also a big thanks to Dennis Koch for the inspiration and tips on generating screenshots. Check out his Filament Environment Indicator plugin on which this is based!

License

The MIT License (MIT). Please see License File for more information.