Weave Code
Spotlight Laravel Package
wire-elements/spotlight
Wire Elements Spotlight is a Livewire component that brings Spotlight/Alfred-style command palette search to your Laravel app. Open it with CTRL+K or CMD+K to quickly search and run commands, all powered by Livewire.
Wire Elements Spotlight brings Spotlight/Alfred-style command palettes to Laravel applications through a ready-made Livewire component. Add @livewire('livewire-ui-spotlight') to your layout, and users can summon a searchable command bar with CTRL/CMD + K (or /) to run actions, navigate, or search records instantly.
- Keyboard-first access with customizable keybindings
- Register custom commands and dynamic search results
- Toggle Spotlight from Livewire components or plain JavaScript
- Configurable appearance and behavior
- Supports Livewire v2 with Alpine and Livewire v3
Frequently asked questions about Spotlight
- How do I install Wire Elements Spotlight in Laravel?
- Install it with composer require wire-elements/spotlight, then add @livewire('livewire-ui-spotlight') once in your application layout. If you are on Livewire v2, include Alpine manually; Livewire v3 does not need the manual Alpine include. Publish the configuration if you want to customize keybindings, CSS, or JS behavior.
- Which Livewire versions does Wire Elements Spotlight support?
- It is built for Livewire and works with both v2 and v3, but event semantics differ: use dispatchBrowserEvent on v2 and dispatch on v3. Alpine is only a manual include on Livewire v2. Pin the package and verify it against your app's actual Livewire version before standardizing.
- How do I change the Spotlight keyboard shortcuts?
- By default Spotlight opens with CTRL+K, CMD+K, CTRL+/, or CMD+/. You can customize the keybindings in the published configuration file. Confirm the chosen shortcuts with product and UX because Ctrl/Cmd+K and Ctrl/Cmd+/ collide with browser and editor shortcuts.
- How can I open or toggle Spotlight programmatically?
- From a Livewire component, dispatch the toggle-spotlight event using dispatchBrowserEvent on Livewire v2 or dispatch on Livewire v3. You can also toggle Spotlight from JavaScript by emitting the same event. This is useful for onboarding, buttons, or custom keyboard handlers.
- How do I create a custom Spotlight command?
- Run php artisan make:spotlight to scaffold a command class that extends SpotlightCommand. Implement the command name, description, search logic, and execute method, then register it through the config array or Spotlight::registerCommand(). Because execute() is container-resolved, you can type-hint services, guards, policies, and the Spotlight handle.
- Can Spotlight commands have multiple steps or dependent selections?
- Yes. A command can define dependencies() and search methods that return SpotlightSearchResult collections, allowing flows like choose a team, then a user, then act. Each dependency can read previously resolved dependencies, so you can scope later results without adding separate state management. This makes the palette a small server-driven wizard over existing services.
- Is Wire Elements Spotlight safe for authorization-sensitive actions?
- No, not by itself. shouldBeShown() is a visibility filter, not an authorization enforcement point, and any search method that returns an unscoped query can become an enumeration surface. Enforce policies and permissions inside execute() and scope every search query to what the current user may see.
- Do I need Tailwind and how do I customize Spotlight's CSS or JavaScript?
- Spotlight assumes Tailwind by default, but you can set include_css to true or publish and adjust the views and assets. If you disable JS injection with include_js, you must bundle fuse.js yourself and wire up the frontend behavior. Configuration, views, and translations can all be published for customization.
- What should I check before using Spotlight in production?
- Verify the pinned release against your Livewire version and test the actual event semantics. Plan for global layout impact, shortcut collisions, accessibility behavior such as focus trapping and ARIA semantics, and the per-keystroke Livewire round trip against your latency budget. Also review the community maintenance status, CI and test coverage, and any security policy before relying on it broadly.
- What are the maintenance concerns or alternatives to Wire Elements Spotlight?
- It is community-maintained rather than vendor-backed, has undergone a package rename from livewire-ui/spotlight to wire-elements/spotlight while keeping the LivewireUI\Spotlight namespace, and the supplied data shows no dependents or visible CI badges. MIT licensing means fork-and-own is a practical fallback. Alternatives include building a custom Livewire and Alpine palette or choosing another command palette package if you need a tested support matrix.
Weaver
How can I help you explore Laravel packages today?