Wraps any screen and walks through it step by step: a rounded spotlight glides between targets while everything else dims, and the step card follows with a pointer tail, progress pills and arrow key navigation.
Briefs, sprints and launch checklists are one click away.
npx shadcn@latest add https://hyperblur.dev/r/popup-tour-spotlight.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-tour-spotlight.tsx.
import { PopupTourSpotlight } from "@/components/hyperblur/popup-tour-spotlight"
<PopupTourSpotlight steps={[{ target: "#billing", title: "Billing", body: "Invoices live here." }]}><App /></PopupTourSpotlight>| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { target: string; title: string; body: string }[] | Search, New, Insights, Team | target is a CSS selector looked up inside the wrapped content. |
| children | ReactNode | A sample dashboard | The screen to tour. Mark targets with attributes such as data-tour="search". |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false (true when embedded) | Start the tour on mount. |
| onOpenChange | (open: boolean) => void | Called when the tour starts or ends. | |
| defaultStep | number | 0 | First step shown. |
| onStepChange | (index: number) => void | Called on Next, Back and arrow keys. | |
| onFinish | (completed: boolean) => void | Called with true after the last step and false on Skip or Escape. | |
| padding | number | 6 | Space in px between the target and the spotlight edge. |
| showTrigger | boolean | true | Show a Take the tour button in the corner while the tour is closed. |
| triggerLabel | string | "Take the tour" | Text of that button. |
| embedded | boolean | false | Skip the page scroll lock and focus trap, for previews. |
| accent | string | "#2f7bff" | Spotlight ring, progress and button color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |