Spotlight — ARC UI

Components

Spotlight

feedback

interactive

<arc-spotlight>

Overview

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

Use spotlight on every page load — it should be triggered intentionally
Highlight elements that are not yet visible in the viewport
Stack multiple spotlights — highlight one element at a time
Block critical functionality behind the overlay without a dismiss option
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-dismiss 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-dismiss="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-dismiss={() => 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: `
    <Spotlight target="#my-feature" [active]="active" [padding]="12"
      (arc-dismiss)="active = false"></Spotlight>
    <Button variant="primary" (click)="active = true">Highlight Feature</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

Prop	Type	Default	Description
`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

Event	Description
`arc-dismiss`	Fired when the user clicks outside the highlighted element to dismiss the spotlight