Signature / Moleculestable

Spotlight

Full-page spotlight overlay for onboarding and feature highlighting.

@glinui/uiComponent: spotlight

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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.

Basic$

Click the button in the code example to see the spotlight overlay.

TSX

1"use client"
2import { Spotlight } from "@glinui/ui"
3import { useState } from "react"
4
5export function SpotlightDemo() {
6const [active, setActive] = useState(false)
7return (
8  <div className="flex items-center justify-center p-8">
9    <button
10      className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-foreground"
11      onClick={() => setActive(true)}
12    >
13      Show Spotlight
14    </button>
15    <Spotlight
16      active={active}
17      x="50%"
18      y="50%"
19      size={120}
20      onDismiss={() => setActive(false)}
21    />
22  </div>
23)
24}

Examples$

With Pulse$

The pulse variant adds a pulsing ring around the spotlight cutout.

TSX

1"use client"
2import { Spotlight } from "@glinui/ui"
3
4export function SpotlightPulseDemo() {
5return (
6  <Spotlight
7    active
8    x="50%"
9    y="50%"
10    size={100}
11    pulse
12    onDismiss={() => {}}
13  />
14)
15}

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$

Prop	Type	Required	Default	Description
`active`	`boolean`	No	`true`	Whether the spotlight is active
`onDismiss`	`() => void`	No	`-`	Click overlay to dismiss
`overlayColor`	`string`	No	`"rgba(0, 0, 0, 0.7)"`	Overlay color
`pulse`	`boolean`	No	`false`	Pulsing animation
`size`	`number`	No	`150`	Spotlight radius in px
`x`	`number \| string`	No	`"50%"`	X position of spotlight center (px or %)
`y`	`number \| string`	No	`"50%"`	Y position of spotlight center (px or %)

Source$

TSX

1import { Spotlight } from "@glinui/ui"

packages/ui/src/components/spotlight.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/spotlight.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

SpotlightProps

`SpotlightProps`

Prop	Type	Required	Default	Description
`active`	`boolean`	No	`true`	Whether the spotlight is active
`onDismiss`	`() => void`	No	`-`	Click overlay to dismiss
`overlayColor`	`string`	No	`"rgba(0, 0, 0, 0.7)"`	Overlay color
`pulse`	`boolean`	No	`false`	Pulsing animation
`size`	`number`	No	`150`	Spotlight radius in px
`x`	`number \| string`	No	`"50%"`	X position of spotlight center (px or %)
`y`	`number \| string`	No	`"50%"`	Y position of spotlight center (px or %)