Spotlight

Installation$

pnpm dlx @glinui/cli@latest add spotlight

Usage$

Spotlight is a "use client" component. It renders a full-viewport overlay with a transparent circular cutout at the specified position, great for onboarding tours and feature highlighting.

Examples$

With Pulse$

"use client"
import { Spotlight } from "@glinui/ui"
export function SpotlightPulseDemo() {

"use client"
import { Spotlight } from "@glinui/ui"


export function SpotlightPulseDemo() {
return (
  <Spotlight
    active
    x="50%"
    y="50%"
    size={100}
    pulse
    onDismiss={() => {}}
  />
)
}

Accessibility$

• When onDismiss is provided, the overlay becomes a focusable button with aria-label="Dismiss spotlight".
• Supports keyboard dismissal via Enter and Space keys.
• Without onDismiss, the overlay is a passive visual element.

Reduced Motion$

The pulse ring animation is paused via motion-reduce:[animation:none].

API Reference$

Source$

import { Spotlight } from "@glinui/ui"