@tour-kit/reactComponents
TourOverlay
TourOverlay component: spotlight overlay that highlights the target element with configurable padding and animation
TourOverlay
Creates a spotlight effect that highlights the target element.
Usage
import { Tour, TourStep, TourOverlay } from '@tour-kit/react';
<Tour id="demo">
<TourStep target="#btn" content="Click here" />
<TourOverlay />
</Tour>Props
Prop
Type
Customization
Custom Colors
<TourOverlay
color="rgba(0, 0, 50, 0.7)"
padding={12}
borderRadius={8}
/>Click Behavior
// Allow clicking outside to skip tour
<TourOverlay
onClickOutside={() => {
const { skip } = useTour('my-tour');
skip();
}}
/>
// Allow interaction with page
<TourOverlay clickThrough={true} />Disable Animation
<TourOverlay animate={false} />CSS Variables
Override default styles with CSS:
.tour-overlay {
--tour-kit-spotlight-color: rgba(0, 0, 0, 0.6);
--tour-kit-spotlight-padding: 12px;
--tour-kit-spotlight-radius: 8px;
}Without Overlay
To create a tour without the spotlight effect, simply omit the TourOverlay component:
<Tour id="demo">
<TourStep target="#btn" content="Click here" />
<TourCard />
{/* No overlay - target is not highlighted */}
</Tour>Custom Overlay
For full control, use the headless hook:
import { useSpotlight } from '@tour-kit/core';
function CustomOverlay() {
const { isVisible, targetRect, padding, borderRadius } = useSpotlight();
if (!isVisible || !targetRect) return null;
return (
<div className="fixed inset-0 z-40">
<svg className="w-full h-full">
<defs>
<mask id="spotlight-mask">
<rect width="100%" height="100%" fill="white" />
<rect
x={targetRect.left - padding}
y={targetRect.top - padding}
width={targetRect.width + padding * 2}
height={targetRect.height + padding * 2}
rx={borderRadius}
fill="black"
/>
</mask>
</defs>
<rect
width="100%"
height="100%"
fill="rgba(0,0,0,0.5)"
mask="url(#spotlight-mask)"
/>
</svg>
</div>
);
}