Overlays onboardinghighlightoverlay

Step Spotlight

Circular mask that highlights a specific element for onboarding.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { StepSpotlight } from 'astro-component-kit';
---

<SpotlightIndicator>Content</SpotlightIndicator>
--- import { StepSpotlight } from 'astro-component-kit'; --- <SpotlightIndicator>Content</SpotlightIndicator>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/StepSpotlight.astro and paste the following code:

astro 
---
---
<div class="spot-mask"></div>
<style>
  .spot-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; clip-path: circle(60px at 50% 50%); pointer-events: none; }
</style>
--- --- <div class="spot-mask"></div> <style> .spot-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; clip-path: circle(60px at 50% 50%); pointer-events: none; } </style>

Quick Info

Category
Overlays
Filename
StepSpotlight.astro
Dependencies
None — pure Astro + CSS
Tags
onboardinghighlightoverlay