@tour-kit/announcementsHeadless
HeadlessSpotlight
HeadlessAnnouncementSpotlight: unstyled highlight primitive with target element positioning and overlay via render props
domidex01Published
Unstyled element spotlight that provides state and behavior through render props.
Additional Render Props
Prop
Type
Example
import { HeadlessSpotlight } from '@tour-kit/announcements/headless';
<HeadlessSpotlight
id="new-button"
render={({
isVisible,
config,
hide,
targetElement,
targetRect,
overlayStyle,
spotlightStyle,
}) => {
if (!isVisible || !targetElement || !targetRect) return null;
return (
<>
{/* Overlay with cutout */}
<div className="overlay" style={overlayStyle} onClick={hide} />
{/* Spotlight highlight */}
<div className="spotlight" style={spotlightStyle} />
{/* Announcement card */}
<div className="announcement-card">
<h3>{config.title}</h3>
<p>{config.description}</p>
<button onClick={hide}>Got it</button>
</div>
</>
);
}}
/>Related
<Spotlight>— styled counterpart with default overlay and cutout.<HeadlessBanner>,<HeadlessModal>,<HeadlessSlideout>,<HeadlessToast>— sibling headless primitives for the other display variants.- Headless overview — when to reach for headless vs. styled.
useAnnouncement— the hook this primitive exposes via render props.useSpotlightanduseElementPosition— sibling hooks for the spotlight positioning math.- Tour
<TourOverlay>— the tour-side analog for the same overlay UX.
Ship onboarding, not config.
npm i @tour-kit/core is free while you build. Every package works unlicensed in development, a one-time licence from $9.99 removes the production watermark when you ship.
Free in development, no signup, no credit card. Pay once, only when you ship.