Filament Theme Inspector

Easily see the fi- class of any element on the page by hovering over it. A tooltip displays the class name, and you can copy it with a click!

https://github.com/user-attachments/assets/d8ecbc95-cfbf-4340-8405-2814a03739c5

Installation

You can install the package via composer:

composer require codewithdennis/filament-theme-inspector

Usage

Add the following plugin to your plugins method on your panel.

use CodeWithDennis\FilamentThemeInspector\FilamentThemeInspectorPlugin;

->plugins([
    FilamentThemeInspectorPlugin::make()
        ->disabled(fn () => ! app()->hasDebugModeEnabled())
])

Freeze (Hold / Toggle)

By default, the freeze button needs to be held down to freeze the tooltip in place. You can change this behavior to toggle by using the toggle method.

FilamentThemeInspectorPlugin::make()
    ->toggle(),

Testing

composer test

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

• CodeWithDennis
• All Contributors

License

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