Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Spotlight

A decorative radial gradient spotlight that follows the mouse cursor inside its container. Requires Alpine.js.

Usage

Move your cursor here

example.blade.php 
<x-slate::spotlight class="flex h-48 items-center justify-center rounded-lg border">
    <p class="relative z-10 text-sm text-muted-foreground">Move your cursor here</p>
</x-slate::spotlight>

Custom color and size

Blue spotlight

example.blade.php 
<x-slate::spotlight
    :size="400"
    color="rgba(59, 130, 246, 0.12)"
    class="flex h-48 items-center justify-center rounded-lg border"
>
    <p class="relative z-10 text-sm font-medium">Blue spotlight</p>
</x-slate::spotlight>

Empty state treatment

Combine with empty composition for a soft call-to-action surface.

Nothing here yet

Create a project to light up this space.

example.blade.php 
<x-slate::spotlight class="rounded-xl border border-dashed">
    <x-slate::empty
        class="border-0"
        title="Nothing here yet"
        description="Create a project to light up this space."
    >
        <x-slot:actions>
            <x-slate::button size="sm">New project</x-slate::button>
        </x-slot:actions>
    </x-slate::empty>
</x-slate::spotlight>
Last updated .