Spotlight

Dims the entire page except a targeted element, which gets an accent-primary glow ring and elevated z-index. For onboarding and feature discovery.

Components

Spotlight

feedback

interactive

<arc-spotlight>

Overview

Spotlight creates a focus effect by dimming the entire page behind a semi-transparent overlay while leaving a single targeted element fully visible and highlighted. The targeted element receives an accent-primary glow ring and is elevated above the overlay, drawing the user's attention directly to it. This pattern is essential for onboarding flows, feature discovery, and guided walkthroughs where you need to direct the user's attention to a specific UI element. Spotlight can be used standalone for one-off highlights or composed with guided-tour for multi-step onboarding sequences. The overlay listens for clicks outside the highlighted element and fires an `arc-close` event, allowing you to close the spotlight or advance to the next step. The padding prop controls the breathing room around the target element, and the component automatically repositions when the target moves or the viewport resizes.

Guidelines

When to use

Use spotlight to introduce new features after a deployment or first login
Keep the highlighted element fully visible and interactive
Provide a way to dismiss the spotlight (click outside or an explicit close button)
Use adequate padding so the glow ring does not overlap the target element
Combine with a popover or tooltip to explain the highlighted element

When not to use

Do not use spotlight on every page load — it should be triggered intentionally
Do not Highlight elements that are not yet visible in the viewport
Do not Stack multiple spotlights — highlight one element at a time
Do not block critical functionality behind the overlay without a dismiss option
Do not use spotlight for error states — use alert or inline-message instead

Features

Full-page dimming overlay with configurable opacity
Target element highlighted with accent-primary glow ring
Automatic z-index elevation for the targeted element
CSS selector-based targeting — highlight any element on the page
Configurable padding around the highlighted element
Click-outside-to-dismiss fires `arc-close` event
Automatic repositioning on scroll, resize, and DOM mutations
Smooth fade-in/fade-out transitions for the overlay
Respects `prefers-reduced-motion` — disables transitions when set
Composable with guided-tour for multi-step onboarding

Preview

Activate Spotlight

This element will be highlighted

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-spotlight id="spotlight" target="#my-feature" padding="12"></arc-spotlight>

<arc-button onclick="document.getElementById('spotlight').active = true">
  Highlight Feature
</arc-button>

<div id="my-feature">This element will be spotlighted</div>

import { Spotlight, Button } from '@arclux/arc-ui-react';
import { useState } from 'react';

export function SpotlightDemo() {
  const [active, setActive] = useState(false);

  return (
    <>
      <Spotlight target="#my-feature" active={active} padding={12}
        onArcDismiss={() => setActive(false)} />
      <Button variant="primary" onClick={() => setActive(true)}>
        Highlight Feature
      </Button>
      <div id="my-feature">This element will be spotlighted</div>
    </>
  );
}

<script setup>
import { ref } from 'vue';
import { Button, Spotlight } from '@arclux/arc-ui-vue';

const active = ref(false);
</script>

<template>
  <Spotlight target="#my-feature" :active="active" :padding="12"
    @arc-close="active = false" />
  <Button variant="primary" @click="active = true">Highlight Feature</Button>
  <div id="my-feature">This element will be spotlighted</div>
</template>

<script>
  import { Button, Spotlight } from '@arclux/arc-ui-svelte';

  let active = false;
</script>

<Spotlight target="#my-feature" {active} padding={12}
  on:arc-close={() => active = false} />
<Button variant="primary" on:click={() => active = true}>Highlight Feature</Button>
<div id="my-feature">This element will be spotlighted</div>

import { Component } from '@angular/core';
import { Button, Spotlight } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button, Spotlight],
  template: `
    <arc-spotlight target="#my-feature" [active]="active" [padding]="12"
      (arc-close)="active = false"></arc-spotlight>
    <arc-button variant="primary" (click)="active = true">Highlight Feature</arc-button>
    <div id="my-feature">This element will be spotlighted</div>
  `,
})
export class SpotlightDemoComponent {
  active = false;
}

import { Button, Spotlight } from '@arclux/arc-ui-solid';
import { createSignal } from 'solid-js';

export function SpotlightDemo() {
  const [active, setActive] = createSignal(false);

  return (
    <>
      <Spotlight target="#my-feature" active={active()} padding={12}
        onArcDismiss={() => setActive(false)} />
      <Button variant="primary" onClick={() => setActive(true)}>
        Highlight Feature
      </Button>
      <div id="my-feature">This element will be spotlighted</div>
    </>
  );
}

import { Button, Spotlight } from '@arclux/arc-ui-preact';
import { useState } from 'preact/hooks';

export function SpotlightDemo() {
  const [active, setActive] = useState(false);

  return (
    <>
      <Spotlight target="#my-feature" active={active} padding={12}
        onArcDismiss={() => setActive(false)} />
      <Button variant="primary" onClick={() => setActive(true)}>
        Highlight Feature
      </Button>
      <div id="my-feature">This element will be spotlighted</div>
    </>
  );
}

API

target string ='': CSS selector for the element to highlight. The first matching element will be spotlighted with a glow ring and elevated z-index.
active boolean =false: Controls whether the spotlight overlay is visible. Set to true to activate the dimming overlay and highlight the target element.
padding number =8: Padding in pixels around the target element cutout. Increase for larger glow rings or to give the target more breathing room.

Events

arc-close: Fired when the user clicks outside the highlighted element to dismiss the spotlight

Spotlight

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight