- What does the filament-theme-inspector package actually do?
- It is a Filament developer tool that lets you hover over elements in your panel and see the fi- prefixed CSS class applied to them, with a click-to-copy action for the class name. It is registered as a Filament plugin in a PanelProvider and works entirely client-side against the already-rendered DOM. There is no persistence, no database table, no public API, and no data leaves the page. Treat it as a local debugging convenience rather than an application feature.
- How do I install filament-theme-inspector in a Laravel application?
- Install it with composer require codewithdennis/filament-theme-inspector, then add the plugin to your panel's plugin array, typically ->plugin(ThemeInspectorPlugin::make()) inside your PanelProvider. Filament's standard asset publish flow applies, so run the usual filament:assets or vendor:publish command if assets are not served automatically. Before adopting, confirm from the repository whether it ships precompiled assets or expects a Node/Vite build step that has to fit your deployment pipeline.
- Does filament-theme-inspector support Filament v3 and v4?
- The last release dates to October 2024, which is the Filament v3 era, so v4 compatibility is unverified and may be broken. Check the composer.json constraints for the supported Filament major and minimum PHP version before installing. Because the tool depends on Filament's fi- class naming convention, even a working install can produce incomplete results after a major upgrade. Pilot it in a throwaway panel rather than assuming it will keep working.
- Is it safe to run Filament Theme Inspector in production?
- You should not expose it in production. It is a developer tool with zero production architecture value, and shipping it to a live panel is a security-review smell even though it only reads DOM attributes already visible to an authenticated admin. Gate registration behind app()->isLocal() or, better, a configuration flag so the check is enforceable in CI rather than dependent on reviewer memory. Ideally confine it to a dedicated design sandbox panel instead of your shared admin panel.
- Why is the copy button not copying the class name on my staging server?
- Clipboard writes require a secure context, meaning HTTPS or localhost. On a plain-HTTP staging host the copy call fails silently, so the tooltip appears but nothing lands on the clipboard. Serve the panel over TLS or test locally if you need that behaviour during debugging.
- The tooltip never appears - is a Content-Security-Policy blocking the inspector?
- That is a likely cause. The package injects client-side script to traverse the DOM and match fi- classes, and a strict CSP can block it from running. Check your browser console for CSP violation reports, then either relax the policy for your local environment or skip the tool there. Do not loosen a production CSP just to make a dev tool work.
- Which elements does it detect, and will it work with a custom Filament theme?
- It matches elements carrying Filament's fi- prefixed classes, so it is directly tied to that naming convention. Custom themes that rename, strip, or extend the prefix may yield partial or misleading results, which makes the output hard to trust during debugging. Verify against your own theme before relying on it, and expect breakage whenever Filament changes its class conventions.
- Is filament-theme-inspector still maintained?
- No. The repository is archived as of its last release in October 2024, with roughly 45 stars and no dependents, so there is no patch channel, compatibility matrix, or maintainer. A raw composer require therefore introduces an unmaintained dependency into your admin toolchain. The sensible posture is to vendor the source and own every future fix internally, assuming the license permits it (MIT does, but confirm no bundled assets carry a different license).
- Does it inspect colors and CSS variables, or only fi- classes?
- Two different descriptions circulate: one advertises hover-to-reveal fi- classes with click-to-copy, the other claims browser of colors, typography, spacing, and CSS variables with light and dark preview. Confirm the actual feature set in the tag you install before scoping a pilot. If token inspection is real it partially overlaps Filament's own theming docs; if it is not, stakeholder expectations are already miscalibrated.
- What are the alternatives to Filament Theme Inspector for debugging panel styles?
- Your browser devtools already expose every class and computed style on a panel element, and Filament's theming documentation covers CSS variable overrides. For one-off debugging, devtools is the lower-risk choice because nothing is added to the codebase. The package only earns its place if you repeatedly need quick fi- class lookups during theme work, and even then keep it gated to local environments.