ns-ui
An onboarding tour rendered as a lighthouse — the current target gets a light ring and halo while the rest of the page drops to penumbra behind a single SVG-masked scrim, and advancing sweeps a feathered beam along the path from the old target to the new one as the hole morphs to match.
Use when a step-by-step onboarding tour where the path between targets should be visible, a beam sweeping from the old target to the new one as the mask hole morphs to match; pick shortcuts-cheat-sheet instead when the user is looking up keyboard bindings rather than being walked through the UI, or wizard-dovetail when the steps are a form the user fills in rather than a tour of things already on screen.
Install
npx shadcn add https://design.helpmarq.comns-ui / tour-spotlight
A 4-stop tour auto-advances through the mini-app above; the beam sweeps between each highlighted control while the rest dims.
Every workspace you have access to shows up in this nav — switch between them without leaving the page.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | LeadingLightStep[] | — | — |
| active | number | — | current step index, 0-based |
| onNext | () => void | — | — |
| onBack | () => void | — | — |
| onExit | () => void | — | Esc or Skip — caller unmounts / restores whatever it wants |
| className? | string | — | — |