edeoliv/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!

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!

example.mov

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())
])

Copy

When you hover over an element on the page, a tooltip will appear with the fi- class name. You can click on the copy icon to copy the class name to your clipboard. Hold ALT or OPTION key to freeze the tooltip in place, so you can copy the class name.

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.