Spotlight-like UI for Your Laravel Applications

Packages

July 2nd, 2021

livewireui-spotlight-featured.png

Livewire UI Spotlight is a Livewire component that provides Spotlight/Alfred-like launcher to your Laravel applications:

At the heart of using this package is creating spotlight commands for your application that users can execute. For example, the readme provides a snippet for logging a user out via the Spotlight component:

1<?php
2
3namespace LivewireUI\Spotlight\Commands;
4
5use Illuminate\Contracts\Auth\StatefulGuard;
6use LivewireUI\Spotlight\Spotlight;
7use LivewireUI\Spotlight\SpotlightCommand;
8
9class Logout extends SpotlightCommand
10{
11 protected string $name = 'Logout';
12
13 protected string $description = 'Logout out of your account';
14
15 public function execute(Spotlight $spotlight, StatefulGuard $guard): void
16 {
17 $guard->logout();
18 $spotlight->redirect('/');
19 }
20}

As Mac users are used to the CMD + Space shortcut to trigger Spotlight/Alfred, this component defaults to CTRL/CMD + K or CTRL/CMD + /, and these shortcuts are customizable from a published package configuration.

You can also trigger spotlight programmatically in any Livewire component:

1$this->dispatchBrowserEvent('toggle-spotlight');

Or via Alpine within your markup:

1<button @click="$dispatch('toggle-spotlight')">Toggle Spotlight</button>

The use-cases are endless with this component to make your application more accessible to power users and desktop-like experiences. You can learn more about this package, get full installation instructions, and view the source code on GitHub.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.