TourSpotlight

The dim and the ring a Tour draws, on its own, to point at one element, such as a new feature. It never blocks the pointer, so the page stays usable.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Export now saves a PDF as well.

Export now saves a PDF as well.

Export now saves a PDF as well.

tsx

import { TourSpotlight } from '@skribly/ui/onboarding'

tsx

<TourSpotlight target={element} showCursor />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

Decoration only: hidden from screen readers, so say in words what it points at.
The ring is a real border, which stays in forced-colors mode where the dim shadow is dropped.
It moves without animation under reduced motion.

This demo runs through axe in all three themes on every test run. See what the tests check.